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

将HTMLCollection/NodeList/伪数组转换成数组的实现方法

Jun 20 Javascript

js实现addClass,removeClass,hasClass的函数代码

Jul 13 Javascript

qTip2 精致的基于jQuery提示信息插件

Feb 17 Javascript

两种常用的javascript数组去重方法思路及代码

Mar 26 Javascript

JS实现鼠标箭头变成一个燃烧烛光效果的方法

Feb 28 Javascript

举例讲解jQuery中可见性过滤选择器的使用

Apr 18 Javascript

Vue网页html转换PDF（最低兼容ie10）的思路详解

Aug 24 Javascript

JS处理数据四舍五入(tofixed与round的区别详解)

Oct 26 Javascript

Vue.js实现可配置的登录表单代码详解

Mar 29 Javascript

React+TypeScript+webpack4多入口配置详解

Aug 08 Javascript

js实现随机div颜色位置类似满天星效果

Oct 24 Javascript

Javascript如何实现双指控制图片功能

Feb 25 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

用PHP实现WEB动态网页静态

2006/10/09 PHP

simplehtmldom Doc api帮助文档

2012/03/26 PHP

SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据

2012/06/17 PHP

一个显示效果非常不错的PHP错误、异常处理类

2014/03/21 PHP

php实现的XML操作(读取)封装类完整实例

2017/02/23 PHP

PHP实现发送微博消息功能完整示例

2019/12/04 PHP

一个加密JavaScript的开源工具PACKER2.0.2

2006/11/04 Javascript

收藏一些不常用，但是有用的代码

2007/03/12 Javascript

JavaScript 编程引入命名空间的方法与代码

2007/08/13 Javascript

js对文章内容进行分页示例代码

2014/03/05 Javascript

JavaScript中document.forms[0]与getElementByName区别

2015/01/21 Javascript

js+HTML5基于过滤器从摄像头中捕获视频的方法

2015/06/16 Javascript

解决jQuery uploadify在非IE核心浏览器下无法上传

2015/08/05 Javascript

Bootstrap入门书籍之（零）Bootstrap简介

2016/02/17 Javascript

jQuery基于扩展实现的倒计时效果

2016/05/14 Javascript

JS实现拖拽的方法分析

2016/12/20 Javascript

vue做网页开场视频的实例代码

2017/10/20 Javascript

VUE兄弟组件传值操作实例分析

2019/10/26 Javascript

基于Element的组件改造的树形选择器(树形下拉框)

2020/02/27 Javascript

nginx部署多个vue项目的方法示例

2020/09/06 Javascript

Python 判断是否为质数或素数的实例

2017/10/30 Python

详解Tensorflow数据读取有三种方式（next_batch）

2018/02/01 Python

使用python中的in ,not in来检查元素是不是在列表中的方法

2018/07/06 Python

Python多进程池 multiprocessing Pool用法示例

2018/09/07 Python

python八皇后问题的解决方法

2018/09/27 Python

python实现名片管理系统

2018/11/29 Python

Python实现繁?转为简体的方法示例

2018/12/18 Python

Python通过TensorFlow卷积神经网络实现猫狗识别

2019/03/14 Python

Python + OpenCV 实现LBP特征提取的示例代码

2019/07/11 Python

Python开发之基于模板匹配的信用卡数字识别功能

2020/01/13 Python

加拿大休闲和工业服装和鞋类零售商：L’Équipeur

2018/01/12 全球购物

党员个人对照检查材料范文

2014/09/24 职场文书

失恋33天观后感

2015/06/11 职场文书

2015年度考核个人工作总结

2015/10/24 职场文书

Pandas数据结构之Series的使用

2022/03/31 Python

Android studio 简单计算器的编写

2022/05/20 Java/Android