编程 Javascript

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

Posted in Javascript onSeptember 25, 2018

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

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

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

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

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

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

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

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

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

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

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

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

- Author -

爱情与灵药cium

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

把textarea中字符串里含有的回车换行替换成&lt;br&gt;的javascript代码

Apr 20 Javascript

Jquery命名冲突解决的五种方案分享

Mar 16 Javascript

Jquery实现仿京东商城省市联动菜单

Nov 19 Javascript

JavaScript焦点事件、鼠标事件和滚轮事件使用详解

Jan 15 Javascript

JavaScript修改作用域外变量的方法

Mar 25 Javascript

微信小程序 modal详解及实例代码

Nov 09 Javascript

jQuery代码实现实时获取时间

Jan 29 Javascript

angularJS+requireJS实现controller及directive的按需加载示例

Feb 20 Javascript

ajax前台后台跨域请求处理方式

Feb 08 Javascript

详解基于vue-cli3.0如何构建功能完善的前端架子

Oct 09 Javascript

如何使用CSS3+JQuery实现悬浮墙式菜单

Jun 18 jQuery

浅析webpack-bundle-analyzer在vue-cli3中的使用

Oct 23 Javascript

在axios中使用params传参的时候传入数组的方法

Sep 25 #Javascript

VUE实现可随意拖动的弹窗组件

Sep 25 #Javascript

vue移动端弹框组件的实例

Sep 25 #Javascript

JavaScript常用数组操作方法,包含ES6方法

May 10 #Javascript

在vue项目中,将juery设置为全局变量的方法

Sep 25 #Javascript

解决vue A对象赋值给B对象,修改B属性会影响到A的问题

Sep 25 #Javascript

解决vue-cli webpack打包后加载资源的路径问题

Sep 25 #Javascript

You might like

destoon在360浏览器下出现用户被强行注销的解决方法

2014/06/26 PHP

WordPress主题制作之模板文件的引入方法

2015/12/28 PHP

laravel中的一些简单实用功能

2018/11/03 PHP

微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解

2019/04/10 PHP

JqGrid web打印实现代码

2011/05/31 Javascript

jquery 中多条件选择器,相对选择器,层次选择器的区别

2012/07/03 Javascript

设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码

2013/03/26 Javascript

js 有框架页面跳转(target)三种情况下的应用

2013/04/09 Javascript

js验证模型自我实现的具体方法

2013/06/21 Javascript

JS获取网页图片name属性的方法

2015/04/01 Javascript

JavaScript对象学习小结

2015/09/02 Javascript

Bootstrap组件系列之福利篇几款好用的组件(推荐)

2016/06/23 Javascript

jquery datatable服务端分页

2016/08/31 Javascript

IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

2016/10/25 Javascript

javascript设计模式之策略模式学习笔记

2017/02/15 Javascript

jquery.pager.js分页实现详解

2019/07/29 jQuery

angular8和ngrx8结合使用的步骤介绍

2019/12/01 Javascript

js实现点击按钮随机生成背景颜色

2020/09/05 Javascript

Python爬虫包 BeautifulSoup 递归抓取实例详解

2017/01/28 Python

Python实现的爬取百度贴吧图片功能完整示例

2019/05/10 Python

python multiprocessing多进程变量共享与加锁的实现

2019/10/02 Python

TensorFlow查看输入节点和输出节点名称方式

2020/01/04 Python

施华洛世奇加拿大官网：SWAROVSKI加拿大

2018/06/03 全球购物

英国邮购活的植物主要供应商：Gardening Direct

2019/01/28 全球购物

Vector, ArrayList, HashTable, HashMap哪些是线程安全的，哪些不是

2015/10/12 面试题

实习心得体会

2014/01/02 职场文书

人事专员的岗位职责

2014/03/01 职场文书

中考冲刺决心书

2014/03/11 职场文书

个人承诺书

2014/03/26 职场文书

老公爱的承诺书

2014/03/31 职场文书

老干部工作先进集体事迹材料

2014/05/21 职场文书

幼儿园师德师风学习材料

2014/05/29 职场文书

2015年部门工作总结范文

2015/03/31 职场文书

婚宴致辞

2015/07/28 职场文书

机关干部正风肃纪心得体会

2016/01/15 职场文书

go:垃圾回收GC触发条件详解

2021/04/24 Golang