VUE样式添加scoped后样式不起效果

1、问题描述

页面中下拉框内容太多,需要换行,然而在style中添加scoped后就不换行了。

2、scoped属性分析

vue中引入了scoped这个概念,设计思想就是让当前组件的样式不会修改到其他页面的样式,使用了data-v-hash的方式来使css有了他对应的模块的标识,通俗来说就是使用了scoped属性,template里面的html都会多一个data-v-hash的属性,css 选择器会根据data-v-hash来进行选择,当前的css文件只会对当前的页面生效。
 3、解决办法

针对必须设置属性scoped的组件,可以在page2.vue里面再单独写一个style,在页面里面单独写组件之外(html,body等)的样式,因为scoped不会对组件之外的dom增加data-v-hash属性

参考https://blog.csdn.net/xingmeiok/article/details/94563881

你可能感兴趣的:(javascript,vue.js)