编程 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读取html5 localstorage的值的方法

Jan 04 Javascript

jquery Mobile入门—外部链接切换示例代码

Jan 08 Javascript

JavaScript版TAB选项卡效果实例

Aug 16 Javascript

利用a标签自动解析URL分析网址实例

Oct 20 Javascript

三个js循环的关键字示例(for与while)

Feb 16 Javascript

EditPlus中的正则表达式实战(4)

Dec 15 Javascript

详解Angular5 服务端渲染实战

Jan 04 Javascript

JavaScript基于对象方法实现数组去重及排序操作示例

Jul 10 Javascript

axios取消请求的实践记录分享

Sep 26 Javascript

发布Angular应用至生产环境的方法

Dec 10 Javascript

浅谈vue中使用编辑器vue-quill-editor踩过的坑

Aug 03 Javascript

一篇文章弄清楚Ajax请求的五个步骤

Mar 17 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

福利彩票幸运号码自动生成器

2006/10/09 PHP

一个简易需要注册的留言版程序

2006/10/09 PHP

thinkphp判断访客为手机端或PC端的方法

2014/11/24 PHP

ExtJS Ext.MessageBox.alert()弹出对话框详解

2010/04/02 Javascript

js弹出的对话窗口永远保持居中显示

2012/12/15 Javascript

jquery实现html页面 div 假分页有原理有代码

2014/09/06 Javascript

jQuery插件zepto.js简单实现tab切换

2015/06/16 Javascript

jquery点击改变class并toggle的实现代码

2016/05/15 Javascript

Three.js学习之正交投影照相机

2016/08/01 Javascript

纯js实现html转pdf的简单实例(推荐)

2017/02/16 Javascript

详解nodejs微信公众号开发——5.素材管理接口

2017/04/11 NodeJs

简单使用webpack打包文件的实现

2019/10/29 Javascript

基于Vue sessionStorage实现保留搜索框搜索内容

2020/06/01 Javascript

Python使用函数默认值实现函数静态变量的方法

2014/08/18 Python

完美解决在oj中Python的循环输入问题

2018/06/25 Python

Django使用模板后无法找到静态资源文件问题解决

2019/07/19 Python

pymysql 开启调试模式的实现

2019/09/24 Python

Pytorch之parameters的使用

2019/12/31 Python

django模型动态修改参数,增加 filter 字段的方式

2020/03/16 Python

使用canvas绘制贝塞尔曲线

2014/12/17 HTML / CSS

米兰必去买手店排行榜首位：Antonioli

2016/09/11 全球购物

一家专门做特卖的网站：唯品会

2016/10/09 全球购物

九年级体育教学反思

2014/01/23 职场文书

期终自我鉴定

2014/02/17 职场文书

小学生学习感言

2014/03/10 职场文书

诉讼授权委托书

2014/10/15 职场文书

2014年人事专员工作总结

2014/11/19 职场文书

2014年财政局工作总结

2014/12/09 职场文书

检讨书大全

2015/01/27 职场文书

部队2015年终工作总结

2015/04/02 职场文书

2015年文员个人工作总结

2015/04/09 职场文书

行为规范主题班会

2015/08/13 职场文书

学风建设主题班会

2015/08/17 职场文书

MySQL系列之十 MySQL事务隔离实现并发控制

2021/07/02 MySQL

不负正版帝国之名《重返帝国》引领SLG手游制作新的标杆

2022/04/07 其他游戏

详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别

2022/07/15 Servers