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

javascript中普通函数的使用介绍

Dec 19 Javascript

jQuery中first()方法用法实例

Jan 06 Javascript

Jquery实现地铁线路指示灯提示牌效果的方法

Mar 02 Javascript

javascript实现控制文字大中小显示

Apr 28 Javascript

jquery.serialize() 函数语法及简单实例

Jul 08 Javascript

angular2路由切换改变页面title的示例代码

Aug 23 Javascript

JS实现的简单标签点击切换功能示例

Sep 21 Javascript

JavaScript实现简单生成随机颜色的方法

Sep 21 Javascript

微信小程序实现城市列表选择

Jun 05 Javascript

基于ssm框架实现layui分页效果

Jul 27 Javascript

js实现跟随鼠标移动的小球

Aug 26 Javascript

vue中axios封装使用的完整教程

Mar 03 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中autoload的用法总结

2013/11/08 PHP

php对二维数组进行排序的简单实例

2013/12/19 PHP

WordPress中登陆后关闭登陆页面及设置用户不可见栏目

2015/12/31 PHP

两种php实现图片上传的方法

2016/01/22 PHP

PHP单例模式简单用法示例

2017/06/23 PHP

Yii2框架中使用PHPExcel导出Excel文件的示例

2017/08/09 PHP

php设计模式之组合模式实例详解【星际争霸游戏案例】

2020/03/27 PHP

基于JavaScript 类的使用详解

2013/05/07 Javascript

JavaScript来实现打开链接页面的简单实例

2016/06/02 Javascript

Vue.js每天必学之数据双向绑定

2016/09/05 Javascript

Webpack打包慢问题的完美解决方法

2017/03/16 Javascript

用vue的双向绑定简单实现一个todo-list的示例代码

2017/08/03 Javascript

Mongoose中document与object的区别示例详解

2017/09/18 Javascript

JS实现点击链接切换显示隐藏内容的方法

2017/10/19 Javascript

使用store来优化React组件的方法

2017/10/23 Javascript

JavaScript中Object值合并方法详解

2017/12/22 Javascript

Vue使用mixins实现压缩图片代码

2018/03/14 Javascript

Postman动态获取返回值过程详解

2020/06/30 Javascript

微信小程序实现简单的select下拉框

2020/11/23 Javascript

在Python的Django框架中创建语言文件

2015/07/27 Python

python django使用haystack:全文检索的框架(实例讲解)

2017/09/27 Python

python的slice notation的特殊用法详解

2019/12/27 Python

Django实现简单的分页功能

2021/02/22 Python

《鸟岛》教学反思

2014/04/26 职场文书

离婚财产分隔协议书

2014/10/23 职场文书

房地产销售员岗位职责

2015/04/11 职场文书

用人单位聘用意向书

2015/05/11 职场文书

物业保洁员管理制度

2015/08/05 职场文书

2016年9月份红领巾广播稿

2015/12/21 职场文书

煤矿安全学习心得体会

2016/01/18 职场文书

Apache压力测试工具的安装使用

2021/03/31 Servers

SQLServer 日期函数大全(小结)

2021/04/08 SQL Server

React 高阶组件HOC用法归纳

2021/06/13 Javascript

Mysql数据库手动及定时备份步骤

2021/11/07 MySQL

如何利用React实现图片识别App

2022/02/18 Javascript

Tomcat starup.bat 脚本实现开机自启动

2022/04/20 Servers