编程 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 异步调用框架 (Part 3 - 代码实现)

Aug 04 Javascript

不同浏览器的怪癖小结

Jul 11 Javascript

javascript实现TreeView 无刷新展开的实例代码

Jul 13 Javascript

javascript实现des解密加密全过程

Apr 03 Javascript

自己动手手写jQuery插件总结

Jan 20 Javascript

jquery 插件实现多行文本框[textarea]自动高度

Mar 04 Javascript

原生JS实现拖拽图片效果

Aug 27 Javascript

jQuery实现图片滑动效果

Mar 08 Javascript

PHP自动加载autoload和命名空间的应用小结

Dec 01 Javascript

使用express来代理服务的方法

Jun 21 Javascript

Javascript查看大图功能代码实现

May 07 Javascript

openlayers实现图标拖动获取坐标

Sep 25 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

微信公众平台开发教程⑤ 微信扫码支付模式介绍

2019/04/10 PHP

Laravel Validator自定义错误返回提示消息并在前端展示

2019/05/09 PHP

收藏Javascript中常用的55个经典技巧

2007/08/12 Javascript

javascript中的数字与字符串相加实例分析

2011/08/14 Javascript

JS构建页面的DOM节点结构的实现代码

2011/12/09 Javascript

node.js中的fs.readFileSync方法使用说明

2014/12/15 Javascript

JavaScript实现算术平方根算法-代码超简单

2015/09/11 Javascript

信息页文内画中画广告js实现代码(文中加载广告方式)

2016/01/03 Javascript

360doc网站不登录就无法复制内容的解决方法

2018/01/27 Javascript

微信小程序使用二次贝塞尔曲线画波浪

2018/12/25 Javascript

layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子

2019/09/06 Javascript

jquery弹窗时禁止body滚动条滚动的例子

2019/09/21 jQuery

Vue 嵌套路由使用总结（推荐）

2020/01/13 Javascript

Javascript表单序列化原理及实现代码详解

2020/10/30 Javascript

[01:01]2020完美高校联赛（秋）西安落幕

2021/03/11 DOTA

详解Python Socket网络编程

2016/01/05 Python

解析Python中的eval()、exec()及其相关函数

2017/12/20 Python

Python操作Redis之设置key的过期时间实例代码

2018/01/25 Python

python3安装pip3（install pip3 for python 3.x）

2018/04/03 Python

实例详解Python装饰器与闭包

2019/07/29 Python

Python实现栈和队列的简单操作方法示例

2019/11/29 Python

python3列表删除大量重复元素remove()方法的问题详解

2021/01/04 Python

css3实现动画的三种方式

2020/08/24 HTML / CSS

解决img标签上下出现间隙的方法

2016/12/14 HTML / CSS

Linux如何压缩可执行文件

2014/03/27 面试题

运动会方阵解说词

2014/02/12 职场文书

2014年父亲节活动方案

2014/03/06 职场文书

鼓舞士气的口号

2014/06/16 职场文书

2014年效能监察工作总结

2014/11/21 职场文书

2014年幼儿园小班工作总结

2014/12/04 职场文书

水电工程师岗位职责

2015/02/13 职场文书

物业前台接待岗位职责

2015/04/03 职场文书

小学语文课《掌声》教学反思

2016/03/03 职场文书

2016最新离婚协议书范本及程序

2016/03/18 职场文书

Python尝试实现蒙特卡罗模拟期权定价

2022/04/21 Python

python manim实现排序算法动画示例

2022/08/14 Python