【Vue面试题】scoped原理

最新推荐文章于 2024-11-12 16:34:34 发布

劰的劰

最新推荐文章于 2024-11-12 16:34:34 发布

阅读量95

点赞数

分类专栏：面试知识点文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/trista_1999/article/details/130474089

版权

面试知识点专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js中使用`scoped`属性来确保组件样式只在其内部生效，避免影响其他组件。这种方法通过给节点添加自定义数据属性，然后在CSS中利用属性选择器来应用样式，实现了CSS的局部作用域。

摘要由CSDN通过智能技术生成

1.作用：让样式在本组件中生效，不影响其他组件。
2.原理：给节点新增自定义属性，然后css根据属性选择器添加样式

<template>
  <div class="home">
  	<h1>首页</h1>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>
<style scoped>
h1{
	background: red;
}
</style>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	div[data-v-xxxx]{
		background: red;
	}
	</style>
</head>
<body>

<div data-v-xxxx>11111</div>
<div >222222</div>
</body>
</html>