vue常用操作及学习笔记(样式)

scoped属性

当 <style> 标签有scoped 属性时,它的 CSS 只作用于当前组件中的元素

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

如何让CSS只在当前组件中起作用?
使用css预处理器

// less
<template>
    <div class="myLess">            
    </div>
</template>
<script type="text/javascript">
    export default{
        data () {
            return {
                index:0
            }
        }
    }
</script>
<style type="text/css" lang="less">
    .myLess{            
    }
</style>

// sass
<template>
    <div class="mySass">            
    </div>
</template>
<script type="text/javascript">
    export default{
        data () {
            return {
                index:0
            }
        }
    }
</script>
<style type="text/css" lang="scss">
    .mySass{            
    }
</style>
    原文作者:liuoomei
    原文地址: https://segmentfault.com/a/1190000018572361
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞