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

基于jquery的15款幻灯片插件

Apr 10 Javascript

escape函数解决js中ajax传递中文出现乱码问题

Oct 30 Javascript

javascript制作2048游戏

Mar 30 Javascript

理解jquery事件冒泡

Jan 03 Javascript

HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)

May 25 Javascript

CSS3 3D 技术手把手教你玩转

Sep 02 Javascript

详解jQuery中的事件

Dec 14 Javascript

JavaScript面试出现频繁的一些易错点整理

Mar 29 Javascript

create-react-app使用antd按需加载的样式无效问题的解决

Feb 26 Javascript

Element Popover 弹出框的使用示例

Jul 26 Javascript

ES6中的类（Class）示例详解

Dec 09 Javascript

如何在vue中使用HTML 5 拖放API

Jan 14 Vue.js

在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判断远程图片或文件是否存在的实现代码

2014/02/20 PHP

小谈php正则提取图片地址

2014/03/27 PHP

php中动态修改ini配置

2014/10/14 PHP

thinkphp jquery实现图片上传和预览效果

2020/07/22 PHP

PHP实现一个多功能购物网站的案例

2017/09/13 PHP

PHP使用ajax的post方式下载excel文件简单示例

2019/08/06 PHP

laravel框架实现去掉URL中index.php的方法

2019/10/12 PHP

超简单的jquery的AJAX用法

2010/05/10 Javascript

通过遮罩层实现浮层DIV登录的js代码

2014/02/07 Javascript

js+css实现导航效果实例

2015/02/10 Javascript

js实现登陆遮罩效果的方法

2015/07/28 Javascript

JavaScript的jQuery库插件的简要开发指南

2015/08/12 Javascript

jquery实现可关闭的倒计时广告特效代码

2015/09/02 Javascript

JSON简介以及用法汇总

2016/02/21 Javascript

jquery获取复选框checkbox的值的简单实现方法

2016/05/26 Javascript

利用JS判断鼠标移入元素的方向

2016/12/11 Javascript

函数四种调用模式以及其中的this指向

2017/01/16 Javascript

巧用canvas

2017/01/21 Javascript

vue.js提交按钮时进行简单的if判断表达式详解

2018/08/08 Javascript

vue+springboot图片上传和显示的示例代码

2020/02/14 Javascript

vue引入静态js文件的方法

2020/06/20 Javascript

JavaScript实现随机点名小程序

2020/10/29 Javascript

Python科学计算环境推荐——Anaconda

2014/06/30 Python

Python中subprocess的简单使用示例

2015/07/28 Python

python如何重载模块实例解析

2018/01/25 Python

Python TestCase中的断言方法介绍

2019/05/02 Python

Python中的支持向量机SVM的使用（附实例代码）

2019/06/26 Python

Python数据可视化图实现过程详解

2020/06/12 Python

CSS3的一个简单导航栏实现

2015/08/03 HTML / CSS

命名空间(namespace)和程序集(Assembly)有什么区别

2015/09/25 面试题

电脑教师的教学自我评价

2013/11/26 职场文书

驾驶员培训方案

2014/05/01 职场文书

2015年清明节网上祭英烈留言寄语

2015/03/04 职场文书

党员反腐倡廉学习心得体会

2015/08/15 职场文书

自考生自我评价

2019/06/21 职场文书

MYSQL如何查看操作日志详解

2022/05/30 MySQL