编程 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第三课修改元素属性及内容的代码

Mar 14 Javascript

js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

Aug 11 Javascript

jQuery插件实现多级联动菜单效果

Dec 01 Javascript

两种js监听滚轮事件的实现方法

May 13 Javascript

基于JS组件实现拖动滑块验证功能(代码分享)

Nov 18 Javascript

jQuery中DOM节点的删除方法总结（超全面）

Jan 22 Javascript

js实现数组去重方法及效率?Ρ? target=

Feb 14 Javascript

JavaScript 巧学巧用

May 23 Javascript

微信小程序实现左右联动的实战记录

Jul 05 Javascript

vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

Nov 05 Javascript

js函数和this用法实例分析

Mar 13 Javascript

VSCode launch.json配置详细教程

Jun 18 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编程最快明白(第一讲软件环境和准备工作）

2010/10/25 PHP

php读取纯真ip数据库使用示例

2014/01/26 PHP

php将csv文件导入到mysql数据库的方法

2014/12/24 PHP

Aster vs KG BO3 第二场2.19

2021/03/10 DOTA

封装好的省市地区联动控件附下载

2007/08/13 Javascript

JS 无限级 Select效果实现代码(json格式)

2011/08/30 Javascript

js鼠标滑过弹出层的定位IE6bug解决办法

2012/12/26 Javascript

javascript自动给文本url地址增加链接的方法分享

2014/01/20 Javascript

jquery实现横向图片轮播特效代码分享

2015/11/19 Javascript

JS中使用apply方法通过不同数量的参数调用函数的方法

2016/05/31 Javascript

关于echarts在节点显示动态数据及添加提示文本所遇到的问题

2018/04/20 Javascript

详解jQuery获取特殊属性的值以及设置内容

2018/11/14 jQuery

关于React动态加载路由处理的相关问题

2019/01/07 Javascript

vue element动态渲染、移除表单并添加验证的实现

2019/01/16 Javascript

javascript跳转与返回和刷新页面的实例代码

2019/11/20 Javascript

js 解析 JSON 数据简单示例

2020/04/21 Javascript

[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/20 DOTA

[02:42]岂曰无衣，与子同袍！DOTA2致敬每一位守护人

2020/02/17 DOTA

urllib2自定义opener详解

2014/02/07 Python

Python字符串详细介绍

2015/05/09 Python

python脚本实现数据导出excel格式的简单方法(推荐)

2016/12/30 Python

Python爬虫_城市公交、地铁站点和线路数据采集实例

2018/01/10 Python

python使用tkinter实现简单计算器

2018/01/30 Python

使用Scrapy爬取动态数据

2018/10/21 Python

python 爬取B站原视频的实例代码

2020/09/09 Python

用CSS3实现背景渐变的方法

2015/07/14 HTML / CSS

HTML5打开本地app应用的方法

2016/03/31 HTML / CSS

鲜为人知的HTML5语音合成功能

2019/05/17 HTML / CSS

Raffaello Network德国：意大利拉斐尔时尚购物网

2019/05/01 全球购物

阿拉伯书店：Jamalon

2019/07/24 全球购物

口腔医学技术应届生求职信

2013/11/09 职场文书

园林技术专业求职信

2014/07/28 职场文书

群众路线领导对照材料

2014/08/23 职场文书

运动会400米加油稿（8篇）

2014/09/22 职场文书

2014年人力资源工作总结

2014/11/19 职场文书

Django基础CBV装饰器和中间件

2022/03/22 Python