当前位置：首页 > news >正文

【Vue CLI脚手架开发】——6.scoped样式

news 2025/7/8 6:30:22

文章目录

一、scoped是什么
二、应用案例
- 1.使用代码
- 2.原理
- 3父组件App未添加scoped影响

一、scoped是什么

我们知道vue为了防止css样式污染，在每个组件中提供了 scoped属性进行限定css作用域；当<style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

作用：让样式在局部生效，防止冲突。
写法：<style scoped>

二、应用案例

1.使用代码

School.vue

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

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'vue学院',
				address:'上海黄浦区',
			}
		}
	}
</script>

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

Student.vue

<template>
	<div class="demo">
		<h2 class="title">学生姓名：{{name}}</h2>
		<h2 class="sex">学生性别：{{sex}}</h2>
	</div>
</template>

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

<style lang="less" scoped>
	.demo{
		background-color: pink;
		.sex{
			font-size: 50px;
			background: red;
		}
	}
</style>

App.vue

<template>
	<div>
		<h2 class="title">hello world</h2>
		<School></School>
		<hr>
		<Student></Student>
	</div>
</template>

<script>
	import Student from './components/Student.vue';
	import School from './components/School.vue';

	export default {
		name:'App',
		components:{
			Student,
			School
		
		},
		data() {
			return {
				
			}
		},
	}
</script>


<style scoped>
	.title{
		color: red;
	}
</style>