作用：使樣式在區域性生效，防止衝突

寫法：<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>