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>