vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue页面class不生效问题

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

作者:paopaosama

这篇文章主要介绍了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

总结

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

您可能感兴趣的文章:
阅读全文