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>