编程 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 相关文章推荐

JavaScript基本语法讲解

Jun 03 Javascript

JS实现双击编辑可修改状态的方法

Aug 14 Javascript

jQuery Mobile弹出窗、弹出层知识汇总

Jan 05 Javascript

JavaScript利用闭包实现模块化

Jan 13 Javascript

JavaScript组件开发之输入框加候选框

Mar 10 Javascript

jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】

Mar 23 jQuery

简单的网页广告特效实例

Aug 19 Javascript

JavaSctit 利用FileReader和滤镜上传图片预览功能

Sep 05 Javascript

详谈构造函数加括号与不加括号的区别

Oct 26 Javascript

深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域

Aug 28 Javascript

解决webpack+Vue引入iView找不到字体文件的问题

Sep 28 Javascript

html+vue.js 实现漂亮分页功能可兼容IE

Nov 07 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

基于mysql的论坛（3）

2006/10/09 PHP

php 仿Comsenz安装效果代码打包提供下载

2010/05/09 PHP

第4章数据处理-php正则表达式-郑阿奇(续)

2011/07/04 PHP

php单例模式的简单实现方法

2016/06/10 PHP

PHP操作路由器实现方法示例

2019/04/27 PHP

让iframe框架网页在任何浏览器下自动伸缩

2006/08/18 Javascript

监控 url fragment变化的js代码

2010/04/19 Javascript

jQuery function的正确书写方法

2013/08/02 Javascript

JS获取当前日期时间并定时刷新示例

2021/03/04 Javascript

JavaScript极简入门教程（二）：对象和函数

2014/10/25 Javascript

jQuery修改li下的样式以及li下的img的src的值的方法

2014/11/02 Javascript

jQuery中next()方法用法实例

2015/01/07 Javascript

jquery 中ajax执行的优先级

2015/06/22 Javascript

javascript运算符——位运算符全面介绍

2016/07/14 Javascript

JS实现滑动门效果的方法详解

2016/12/19 Javascript

3分钟掌握常用的JS操作JSON方法总结

2017/04/25 Javascript

jQuery实现键盘回车搜索功能

2017/07/25 jQuery

Vue页面渲染中key的应用实例教程

2021/01/12 Vue.js

原生JavaScript实现幻灯片效果

2021/02/19 Javascript

Python实现Const详解

2015/01/27 Python

python开发之for循环操作实例详解

2015/11/12 Python

Python使用SocketServer模块编写基本服务器程序的教程

2016/07/12 Python

Python可变参数*args和**kwargs用法实例小结

2018/04/27 Python

Python 做曲线拟合和求积分的方法

2018/12/29 Python

python中count函数简单的实例讲解

2020/02/06 Python

Python flask框架实现浏览器点击自定义跳转页面

2020/06/04 Python

浅谈Keras的Sequential与PyTorch的Sequential的区别

2020/06/17 Python

python 发送邮件的四种方法汇总

2020/12/02 Python

Square Off美国/加拿大：世界上最聪明的国际象棋棋盘

2018/12/06 全球购物

世界排名第一的运动鞋市场：Flight Club

2020/01/03 全球购物

教学改革实施方案

2014/03/31 职场文书

妈妈活动方案

2014/08/15 职场文书

2014年打非治违工作总结

2014/11/13 职场文书

2015年秋季小学开学标语

2015/07/16 职场文书

使用pytorch实现线性回归

2021/04/11 Python

redis数据结构之压缩列表

2022/03/21 Redis