脚本宝典收集整理的这篇文章主要介绍了关于.vue文件中style的scoped属性,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
scoped可以实现style只作用于当前的.vue文件
<template>
<div class="user"></div>
</template>
<script>
</script>
<style lang='less' scoped>
.user {
color:#333;
}
</style>
上面的文件渲染出的dom结构会是这样的
<div data-v-53795c54 class="user"></div>
css样式是这样的
.user[data-v-53795c54] {
color:#333;
}
这样就现实了样式只作用于当前.vue文件。
原因是,css被构建成.user[data-v-53795c54]
但是doc节点依然是普通的<div class="user"></div>
,导致样式不能作用在dom上而失效。
原因在引用的组件上,解决的方法是将scoped属性关闭。
如果需要将scoped关闭,那么style就是作用于整个单页应用
可是我们仍然想要样式之作用于当前的.vue文件,减少对其他文件样式的影响
1.给template
下的根节点加一个class
,并基于这个class
添加样式
<template>
<div class="user">
<p class="name">zaunk</p>
</div>
</template>
<script>
</script>
<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}
</style>
2.基于第一条建议,不要有定义两个相同class名称的根节点,因为都作用于整个单页会有一个失效。
3.不要使用 span {}
这种做样式设置。因为
<template>
<div class="user">
<el-button class="name">zaunk</el-button>
</div>
</template>
<style lang='less>
.user {
color:#333;
span {
color:#122222;
}
}
</style>
上面的样式同样会作用于组件el-button
,这是很危险的
开启scoped样式没有起作用的建议
对于没有生效的样式,我们可以新增一个scoped.css
的文件在main.js
中引用。
普通的css是可以作用于这种dom节点的
.user {
color:#ccc;
}
<div data-v-53795c54 class="user"></div>
以上是脚本宝典为你收集整理的关于.vue文件中style的scoped属性全部内容,希望文章能够帮你解决关于.vue文件中style的scoped属性所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。