解决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

解决v-for中使用v-if或者v-bind:class失效的问题

解决方法是 vm.$set 官方文档中有介绍

我的解决方法使用了框架自带多选按钮,将样式呈现出来

解决v-for中使用v-if或者v-bind:class失效的问题

解决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失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php 执行系统命令的方法
2009/07/07 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php上传文件问题汇总
2015/01/30 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
Python下载网络小说实例代码
2018/02/03 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Pycharm调试程序技巧小结
2020/08/08 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
品管员岗位职责
2013/11/10 职场文书
关于打架的检讨书
2014/01/17 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
公司周年庆典致辞
2015/07/30 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python