vue中style标签属性scpoed的作用

vue

通俗理解:让style标签内的样式独属于单个组件。
如果style上不加上scoped属性,可能会出现样式混乱,布局错乱的现象。
刚开始用vue开发的小伙伴,应该也遇到过类似的情况(这是没加scoped时的渲染):

这是正常的渲染:

刚开始用vue开发的时候,我是不知道的,每次页面出现渲染出错时,都是在我点击了另一个页面再切换到这个页面的时候出现的,然后经过我的对比,我才发现原来这两个页面中有使用相同的类名,然后就出现了把b页面的同类名的样式应用到a页面上了,就出现了渲染出错的情况。

所以在单个组件的style上加上 scoped属性就不会出现不同组件之间样式相互影响的情况。
这个是原理,大家可以去vue的官网上找,懒得找的我把内容粘在下面,行个方便

以上是 vue中style标签属性scpoed的作用 的全部内容, 来源链接: utcz.com/z/374633.html

回到顶部