解决v-for中使用v-if或者v-bind:class失效的问题

 更新时间:2018年09月25日 10:53:35   作者:爱情与灵药cium  
今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在v-for循环出来的列表中使用v-bing动态绑定class、v-show或v-if动态控制个别item 场景一般多用于多项选择

原因是在v-for循环的时候 items是动态创建,所以不会被监听并且实时动态控制class

v-if v-bind:class失效

解决方法是 vm.$set 官方文档中有介绍

我的解决方法使用了框架自带多选按钮,将样式呈现出来

v-if v-bind:class失效

v-if v-bind:class失效

但仅仅是样式呈现,在循环items的时候,给它新增属性isSelect

v-if v-bind:class失效

然后在点击选择的时候,动态设置isSelect属性

v-if v-bind:class失效

在提交的时候去循环判断该list每一项的isSelect属性,从而达到同样的效果

以上这篇解决v-for中使用v-if或者v-bind:class失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    vue路由跳转router-link清除历史记录的三种方式(总结)

    这篇文章主要介绍了vue路由跳转router-link清除历史记录的三种方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue使用$set和$delete操作对象属性

    Vue使用$set和$delete操作对象属性

    这篇文章介绍了Vue使用$set和$delete操作对象属性的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vuex mutations 同步操作方法详解

    vuex mutations 同步操作方法详解

    这篇文章主要介绍了vuex mutations 同步操作方法,需要的朋友可以参考下
    2023-10-10
  • 详解vue-cli 3.0 build包太大导致首屏过长的解决方案

    详解vue-cli 3.0 build包太大导致首屏过长的解决方案

    这篇文章主要介绍了详解vue-cli 3.0 build包太大导致首屏过长的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 浅谈vuex的基本用法和mapaction传值问题

    浅谈vuex的基本用法和mapaction传值问题

    今天小编就为大家分享一篇浅谈vuex的基本用法和mapaction传值问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue实现随机验证码功能的实例代码

    vue实现随机验证码功能的实例代码

    这篇文章主要介绍了vue实现随机验证码功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 修改Vue打包后的默认文件名操作

    修改Vue打包后的默认文件名操作

    这篇文章主要介绍了修改Vue打包后的默认文件名操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vuejs实现下拉框菜单选择

    vuejs实现下拉框菜单选择

    这篇文章主要为大家详细介绍了vuejs实现下拉框菜单选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 关于Vue单页面骨架屏实践记录

    关于Vue单页面骨架屏实践记录

    这篇文章主要给大家介绍了关于Vue单页面骨架屏实践的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-12-12
  • 一文教会你vue中使用async和await

    一文教会你vue中使用async和await

    async和await作为异步函数,语法很简单,就是在函数前面加上async 关键字,来表示它是异步的,下面这篇文章主要给大家介绍了如何通过一文教会你vue中使用async和await的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论