编程 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 ajax 同步异步的执行示例代码

Jun 23 Javascript

javaScript中with函数用法实例分析

Jun 08 Javascript

js实现圆盘记速表

Aug 03 Javascript

JavaScript事件类型中UI事件详解

Jan 14 Javascript

创建一个类Person的简单实例

May 17 Javascript

Javascript使用SWFUpload进行多文件上传

Nov 16 Javascript

jquery+ajax实现省市区三级联动效果简单示例

Jan 04 Javascript

AngularJS之页面跳转Route实例代码

Mar 10 Javascript

微信小程序使用for循环动态渲染页面操作示例

Dec 25 Javascript

解决 viewer.js 动态更新图片导致无法预览的问题

May 14 Javascript

vue ssr+koa2构建服务端渲染的示例代码

Mar 23 Javascript

jQuery+css实现的点击图片放大缩小预览功能示例【图片预览查看大图】

May 29 jQuery

在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读取PDF内容配合Xpdf的使用

2012/11/24 PHP

详解WordPress中调用评论模板和循环输出评论的PHP函数

2016/01/05 PHP

微信小程序发送订阅消息的方法(php 为例)

2019/10/30 PHP

PHP 计算至少是其他数字两倍的最大数的实现代码

2020/05/26 PHP

jquery蒙版控件实现代码

2010/12/08 Javascript

IE、FF浏览器下修改标签透明度

2014/01/28 Javascript

js输出数据精确到小数点后n位代码

2016/07/02 Javascript

jQuery查找dom的几种方法效率详解

2017/05/17 jQuery

微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】

2017/12/12 Javascript

详解vue移动端日期选择组件

2018/02/22 Javascript

微信小程序实现弹出菜单

2018/07/19 Javascript

详解vue数组遍历方法forEach和map的原理解析和实际应用

2018/11/15 Javascript

React降级配置及Ant Design配置详解

2018/12/27 Javascript

在Node.js下运用MQTT协议实现即时通讯及离线推送的方法

2019/01/24 Javascript

JS如何生成动态列表

2020/09/22 Javascript

vue监听键盘事件的相关总结

2021/01/29 Vue.js

[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04

2020/11/04 DOTA

python 将大文件切分为多个小文件的实例

2019/01/14 Python

python单例模式原理与创建方法实例分析

2019/10/26 Python

通过实例解析python描述符原理作用

2020/01/22 Python

python3实现名片管理系统（控制台版）

2020/11/29 Python

史上最详细的Python打包成exe文件教程

2021/01/17 Python

HTML5中使用postMessage实现Ajax跨域请求的方法

2016/04/19 HTML / CSS

Notino意大利：购买香水和化妆品

2018/11/14 全球购物

医学生个人求职信范文

2013/09/24 职场文书

普通院校学生的自荐信

2013/11/27 职场文书

总经理秘书工作职责

2013/12/26 职场文书

保护母亲河倡议书

2014/04/14 职场文书

艺术教育实施方案

2014/05/03 职场文书

大气污染防治方案

2014/05/19 职场文书

四风自我剖析材料思想汇报

2014/10/01 职场文书

九九重阳节致辞

2015/07/31 职场文书

心得体会格式及范文

2016/01/25 职场文书

十二月早安励志心语大全

2019/12/03 职场文书

Python 文本滚动播放器的实现代码

2021/04/25 Python

总结几个非常实用的Python库

2021/06/26 Python