vue项目之页面class不生效问题及解决

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论