Vue scoped 样式

作用：使样式在局部生效，防止冲突

写法：<style scoped>

示例

src 文件结构

|-- scr
    |-- App.vue
    |-- main.js
    |-- components
        |-- MySchool.vue
        |-- MyStudent.vue

App.vue

<template>
  <div>
    <my-school/>
    <br>
    <my-student/>
  </div>
</template>

<script>

  import MySchool from "@/components/MySchool";
  import MyStudent from "@/components/MyStudent";

export default {
  name: 'App',
  components: {
    MySchool,
    MyStudent
  }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

MySchool.vue

<template>
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    export default {
        name: "MySchool",
        data(){
            return {
                name:'ABC',
                address:'长沙'
            }
        }
    }
</script>

<style scoped>
    .demo{
        background-color: #9ebbfc;
    }
</style>

MyStudnet.vue

<template>
    <div class="demo">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    export default {
        name: "MyStudent",
        data(){
            return {
                name:'张三',
                age:19
            }
        }
    }
</script>

<style scoped>
    .demo{
        background-color: #b2dece;
    }
</style>

---