vue项目之页面class不生效问题及解决
作者:paopaosama
vue项目页面class不生效问题
代码如下,vue项目中,页面有一个class为c-ul的div,但是浏览器中style里没有我的c-li样式。这是为什么呢。
研究一番之后发现
1.我的style是scoped,也就是css样式仅应用于我的这个名为component1的页面。因此,在挂载的时候,页面的所有元素都会被vue加上一个自定义属性名:类似于这样的<div data-v-5e57fb82="" class="wrapper"></div>
2.但是因为我的c-ul是条件渲染,因为List.length刚上来是0,所以这个元素不会被挂载在dom树里,因此,就不具备scoped的自定义标签在dom挂载的时候并不会挂载,
3.因此导致了,没有对应的data-v-5e57fb82属性,所以样式不会生效。
<div class='wrapper'> <div v-if="List.length" class="c-ul"> 这是一个list列表 </div> </div>
<script> export default { name: 'component1', data(){ return{ List:[] } }, </scropt>
<style scoped> .wrapper{ background-color: #f4f4f4; height: 100vh; overflow-y:scroll; -webkit-overflow-scrolling:touch; } .c-ul{ min-height: 100vh ; } </style>
解决办法
1.css style删除scoped,应用于整个项目,那么即便if条件满足之后,在dom中插入新的元素,没有scoped的自定义属性限制,c-ul就能够生效了。但是这个方法会使这套css应用于全局,会影响其他页面相同类名的元素样式。(推荐指数1颗星)
2.style仍然scoped,把v-if条件渲染标签需要的样式加在行间style里,就一定会生效,但是如果样式设置太多,则代码不简洁美观。(推荐指数2.5颗星)
3.style仍然scoped,把v-if条件渲染标签单独拎出来进行判断,加一层div,不能用template不然也会失效、(这个最方便解决,推荐指数3颗星!!!)
<div v-if="List.length==0" 这里不加class='c-li',只用来v-if> <div class="c-li" > 这里是list </div> </div>
4.style仍然scoped,但是不使用v-if来条件渲染,不然dom首次挂载中没有这个标签,导致样式不生效,可以使用v-show,原理是,v-show的标签一定会被挂载在dom中,只是display为none,那么既然他首次挂载在了DOM中,scoped给每个DOM元素加自定义属性的时候,这个c-ul元素也会有这个标识,那么对应的c-ul样式就会生效了~但是v-show的条件必须是true or false,语法上和v-if不同,需要你自己处理一下啦。(推荐指数2颗星)
v-html中@click和class不生效解决
vue v-html 中html标签中@click 和 class 不生效问题解决方案
前端用v-html解析渲染html标签能成功渲染,但click事件无法触发(vue没有将其作为vue的模板解析渲染)
点击事件解决方案
将标签中的@click 改为 onclick,
增加
created(){ window.test=this.test ; }, methods: { //标签中的点击事件 test() { }, }
点击事件就可以触发了
class 样式不生效解决方案
1.使用 >>> 穿透
2.定义一个新的style标签,不含有scoped
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。