scoped介绍

1、作用：让样式在局部生效，防止冲突

2、写法：<style scoped>

案例：

Student.vue

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学生姓名：{{name | mySlice}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

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

<style scoped>
	.demo{
		background: orange;
	}
</style>

School.vue

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学校姓名：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平',
			}
		},
	}
</script>

<style scoped>
	.demo{
		background: skyblue;
	}
</style>

效果：虽然School和Student中都有demo样式，但两个样式之间不会相互影响。

Vue2--Vue脚手架scoped

scoped介绍

案例：