Vue中数组数据驱动class的bug解决办法
来源:互联网 发布:c语言求最小公约数 编辑:程序博客网 时间:2024/05/29 03:37
vue中绑定class方法有数组、对象等方法,但是当class的对象参数为数组时,当我们去改变数组时,class并没有得到及时响应,也就是没有数据绑定。本文将解决这一问题。
在做一个Vue项目中遇到一个问题,现在简化问题如下。
代码如下
<!DOCTYPE html><html><meta charset="utf-8"><head><title>Vuex</title><style>.active{ color: red; }</style></head><body><div id="app"><div :class="{active:isActive[0]}" @click="change(0)">红色字体1</div><div :class="{active:isActive[1]}" @click="change(1)">红色字体2</div></div><script src="./vue.js"></script><script>var app = new Vue({el:'#app',data:{isActive:[false,false]},methods:{change(index){this.isActive[index]=true}}})</script></body></html>理论上是点击div的时候分别点击去改变字体的颜色,然而结果并非我们想要得到的。在控制台打印的时候,isActive已经改变了,但就是得不到想要的结果。
如果是如下的却可以:
<div id="app"><div :class="{active:isActive}" @click="change">红色字体1</div></div>//省去部分代码...var app = new Vue({el:'#app',data:{isActive:false},methods:{change{this.isActive=true}}})难道数组绑定不行吗?
其实也不是,如果把方法改成
change(index){ this.isActive=[true,false]}那么点击的时候,第一个”红色字体1”就变成红色了;说明问题在数组问题上。那么如何做到点击对应的然后改变颜色呢?
我的解决方法是:(也就是要给数组做些手脚,此处给数组先添加一个元素,然后再删除。备注:如果是去设置this.isActive.length的是不行的)
change(index){ this.isActive[index]=truethis.isActive.push(true)this.isActive.pop();}
阅读全文
1 0
- Vue中数组数据驱动class的bug解决办法
- Vue遇到的bug-02(vue中修改了数据但视图无法更新的情况)
- 使用vue过程中遇见的bug
- Vue.js-数据驱动的组件化
- vue中class和style的用法:
- vue中style与class的绑定
- Vue之class的
- vue数组中有相同的数据处理
- 模拟Vue之数据驱动
- Vue.js之在数组中插入重复数据
- vue数组中数据变化但是视图没有更新解决方案
- vue数组中数据变化但是视图没有更新解决方案
- vue数组中数据变化但是视图没有更新解决方案
- vue中使用v-bind:class的选项卡
- eCos系统的lwIP驱动及lpc2xxx网卡驱动bug的解决办法
- Vue中v-for的数据分组
- vue组件中数据的传递
- Vue遇到的bug-01
- C# PowerPoint操作的基本用法。
- mysql、oracle、sqlserver查询对应数据库的表名称和别名
- go语言环境搭建与开发环境配置
- 进程的管理
- loadrunner安装过程中的坑
- Vue中数组数据驱动class的bug解决办法
- Uri的相互转换
- npm安装时出现错误解决办法及mac下升级node.js
- leetcode Add Two Numbers 两个数相加
- 欢迎使用CSDN-markdown编辑器
- python自然语言处理-数据概括
- ubutun crontab实现数据库定时备份
- 写给初学前端工程师的一封信
- 常用原生JS方法总结(兼容性写法)