scoped的作用:使嵌套的样式引用不影响当前的vue
App.vue
<template>
<div id="app">
<h1>APP.VUE</h1>
<!--使用组件-->
<Users/>
</div>
</template>
<script>
//注册局部组件
//1 引入组件
import Users from './components/Users.vue'
export default {
name: 'app',
components: { //2 注册组件
Users
}
}
</script>
<style>
h1{
color:red;
}
</style>
Users.vue
<template >
<div id="users">
<h1>USERS.VUE</h1>
<ol>
<!-- vue 遍历需要key属性绑定-->
<li v-for="(val,index) in users" :key="index">
{{val}} 111
</li>
</ol>
</div>
</template>
<script>
//js 逻辑部分
export default {
name: 'users',
data() {
return {
users:["sunwuk","zhubj","shawujing"]
};
}
}
</script>
<style scoped>
h1{
color:green;
}
</style>
最终效果
使用scope之前
使用scope之后