Vue中数组数据驱动class的bug解决办法

最新推荐文章于 2024-07-06 21:38:14 发布
最新推荐文章于 2024-07-06 21:38:14 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue class绑定 数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuhaha/article/details/78191708
版权

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]=true
	this.isActive.push(true)
	this.isActive.pop();
}
 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  shuhaha
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
深入浅出JavaScript进阶【Day07】Vue底层数据驱动原理以及瀑布流引申出的懒加载知识点总结

				
			

			

				

					零小唬的博客
				

				

					09-25
					
					142
					
				

			

		

		

			
				
📌大前端入门到精通   专栏正在持续更新中，案例的原理图解析、各种模块分析💖这里都有哦，同时也欢迎大家订阅专栏，获取更多详细信息哦✊✊✊
✨个人主页：零小唬的博客主页
🥂欢迎大家 👍点赞  📨评论 🔔收藏
✨作者简介：20级计算机专业学生一枚，来自宁夏，可能会去做大前端，目前还在努力学习并记录博客中🧸
🎀本系列专栏: 大前端入门到精通
💕希望本文对你在学习前端的过程中有所帮助，如有不足请指正一起学习，一起进步🥇
⛪座右铭：只要你还愿意努力，世界一定会给你惊喜


Vue底层数据驱动的原理

1、语法：Ob

			
		

	



                

              
                



	

		

			

				
					
前端网页技术之 Vue

				
			

			

				

					cgblpx的博客
				

				

					08-02
					
					5万+
					
				

			

		

		

			
				
文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符 operator方法 methodsVue解析数据三种data值的写法高级用法：v-命令指令集双向绑定 v-model闪现 v-cloak判断 v-if循环 v-for事件 v-on绑定 v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展：观察者设计模式HBuilde

			
		

	



                


  
              

                


	

		

			

				
					
Vue.js绑定HTML class数组语法错误的原因分析

				
			

			

				

					11-28
				

			

		

		

			
				
Vue.js绑定HTML class数组语法错误，详情如下所示：
昨天在官网教程上发现一个错误是这样的，下面看图
http://cn.vuejs.org/guide/class-and-style.html
当有多个条件class时这样写有些繁琐。在1.0.19+中，可以在数组语法中使用对象语法：
如果这样写是可以执行成功的，但有错误

data: {
classA: 'class-a',
classB: 'class-b',
classC: 'class-c',
isB: true,
isC: false
}
<div :class="[classA, { classB: isB, clas

			
		

	





	

		

			

				
					
vue v html bug,vue计算属性时v-for处理数组时遇到的一个bug问题

				
			

			

				

					weixin_36303045的博客
				

				

					06-30
					
					241
					
				

			

		

		

			
				
问题bug: You may have an infinite update loop in a component render function 无限循环1.需要处理的数组(在 ** ssq **里)：2.计算属性 computed：3.v-for 代码：4.最终结果我想把数组前6个数渲染成红色球，最后一个(也就是第7个)渲染成蓝色。解答我已经在 SegmentFault上提问，地址：vue计...

			
		

	



		

			
		



	

		

			

				
					
Vue中Class数据绑定

					
最新发布

				
			

			

				

					qq_51856496的博客
				

				

					07-06
					
					376
					
				

			

		

		

			
				
将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。因此，Vue 专门为class 的。用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是数组或对象。是attribute（属性），我们可以和其他attribute一样使用。数据绑定的一个常见需求场景是操作CSS class列表，因为。如果你想在数组中渲染某个class,你可以使用三元表达式。数组和对象的嵌套过程中，只能数组嵌套对象，不能反其道而行。

			
		

	





	

		

			

				
					
解决vue修改数组数据，dom层未同步问题

				
			

			

				

					qq_36603180的博客
				

				

					03-11
					
					904
					
				

			

		

		

			
				
vue2.0 给data对象、数组新增属性，并触发视图更新

使用方法

   this.$set(this.data,”key”,value’)

实例：

nowDevices:[ {id: '',name: ''} ]
this.$set(this.nowDevices,l,{id: id, name:name});//数组



student: { name: '', sex: ...

			
		

	





	

		

			

				
					
vue修改数组的值，页面没同步更新

				
			

			

				

					曳猫的博客
				

				

					07-14
					
					1612
					
				

			

		

		

			
				
1、vue直接赋值修改数组，页面没同步更新是因为vue由于javascript的限制，不能够直接检测到给数组赋值，也不能对该数组进行长度的赋值。
2、vue包含一组观察数组的变异方法，push()、pop()、shift()、unshift()、splice()、sort()、reverse()，调用这些方法就可以触发视图的更新。

...

			
		

	





	

		

			

				
					
Java 通过修改 .class 修复 BUG

				
			

			

				

					你的世界我来过
				

				

					08-16
					
					728
					
				

			

		

		

			
				
问题来源
下载现场部署的代码的源代码，虽然只有 .class 文件，但是也能够通过反编译获得一些信息，果不其然，其中第一次查询的固定的某个 id 与现在项目中对应的 id 值不一致，然后在现场执行 sql 语句发现没有数据，定位到原因在此。
解决办法
现在我这里的源代码已经被改得面目全非，要改回去是不可能的了。由于是在项目中写的一个固定数字，那么通过分析现场获取过来的项目的 .class 文件，就...

			
		

	





	

		

			

				
					
vue计算属性时v-for处理数组时遇到的一个bug问题

				
			

			

				

					11-28
				

			

		

		

			
				
在开发过程中，理解并遵循Vue的数据驱动原则以及响应式系统的规则，可以帮助我们避免类似的问题，提高代码的稳定性和性能。如果遇到类似问题，及时查阅文档或社区解答，如SegmentFault，是很好的解决途径。

			
		

	





	

		

			

				
					
基于 Vue3打造前台+中台通用提效解决方案（上）

				
			

			

				

					oschina_41559824的博客
				

				

					03-04
					
					1577
					
				

			

		

		

			
				
本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack

vite

2.2、这么快会有什么问题吗？
如果大家对的构建机制有了解的话，那么应该可以发现一个问题。
那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在 的内容怎么办?是不是就意味着无法解析呢?
是的!
在  的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。
比如 因为  

			
		

	





	

		

			

				
					
前端vue经典面试题78道（重点详细简洁）

					
热门推荐

				
			

			

				

					weixin_59519449的博客
				

				

					03-21
					
					7万+
					
				

			

		

		

			
				
1.自我介绍

2分钟，200-300个字，主旨自己基本情况，工作经历，优点，兴趣爱好，职业规划，邀约

2.vue面试题

1.v-show和v-if区别的区别：

v-show通过css display控制显示和隐藏，v-if组件真正的渲染和销毁，而不是显示和隐藏，频繁切换状态使用v-show 否则v-if

2.为何v-for要用key

快速查找到节点，减少渲染次数，提升渲染性能

3.描述vue组件声明周期mm

单组件声明周期图

挂载： beforeCreate => created =

			
		

	





	

		

			

				
					
解决class绑定数组，改变数组不更新view问题

				
			

			

				

					Lora_0925的博客
				

				

					05-20
					
					391
					
				

			

		

		

			
				
首先我们先思考一下，vue的数据是怎么更新的，绑定原理是什么。

众所周知，vue2采用的数据劫持是使用object.defineproperty()方法，但是object.defineproperty()方法并不完美，它的缺陷，主要表现在两个方面：

1.无法检测到对象属性的新增或删除

　由于js的动态性，可以为对象追加新的属性或者删除其中某个属性，这点对经过Object.defineProperty方法建立的响应式对象来说，只能追踪对象已有数据是否被修改，无法追踪新增属性和删除属性，这就需要另外处理。

			
		

	





	

		

			

				
					
vue中v-for绑定数组，当数组变化时页面数据不更新，：class和：style失效的原因

				
			

			

				

					qq_42661587的博客
				

				

					09-07
					
					2421
					
				

			

		

		

			
				
问题：点击事件里改变了数组内容，但是：class和：style没有监听到样式，从而页面样式没有一同改变。



原因：

根据vue的官方文档说明：Vue 包含一组观察数组的变异方法，所以它们将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reverse()





splice 替换

写法

array.splice(index,n,data1,data2,......);

参数

index：需要替换的元素的...

			
		

	





	

		

			

				
					
：class动态绑定，页面不重新渲染的解决方案

				
			

			

				

					qq_41908953的博客
				

				

					07-22
					
					1213
					
				

			

		

		

			
				
用数组形式，页面不重新进行渲染解决


:class="{ onlist: i == dianfo.row3 }"  // onlist 是class类的名字  dianfo是自定义名字

<a 
v-for="(item, i) in dds[2]"
:key="i"
:class="{ onlist: i == dianfo.row3 }">{{ item.name }}</a>

dianfo如果是数组，这里不会重新渲染；


dianfo: [0,0,0,0]


改为对象形

			
		

	





	

		

			

				
					
vue基础

				
			

			

				

					fu_miao_qi_lai的博客
				

				

					07-07
					
					775
					
				

			

		

		

			
				
vue基础

			
		

	





	

		

			

				
					
vue进行判断使用class_vue :class 判断失效问题

				
			

			

				

					weixin_39781452的博客
				

				

					02-22
					
					1186
					
				

			

		

		

			
				
vue的:c道用确常端以效的，近从于，用开通果是这近lass 判断问题，这边做了判断，但是class效果加不上去，刚开始做vue项目，真的很不懂，下面是有问题的代码，只留下了主要的部分，求个大神帮忙看看，蟹蟹二，都过发宗发数前业很断屏击和公图使分近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，蟹蟹.show_bo...

			
		

	





	

		

			

				
					
vue 使用数组语法绑定class

				
			

			

				

					qq_58247332的博客
				

				

					10-11
					
					379
					
				

			

		

		

			
				
vue 数组语法设置 class 样式

			
		

	





	

		

			

				
					
vue动态class点击没反应

				
			

			

				

					userzou的博客
				

				

					03-25
					
					4429
					
				

			

		

		

			
				
:class="item.id==activeId?'active-list':'search-list'"

vue动态class点击不显示的时候，没反应，在动态的class后加一个!important




			
		

	





	

		

			

				
					
关于Vue页面数据不同步更新问题

				
			

			

				

					RicciLiu的博客
				

				

					04-07
					
					4984
					
				

			

		

		

			
				
关于Vue页面数据不同步更新问题
【摘要】
在我们平时开发中，很容易出现的就是，使用对象时，数据已经更新，但视图未同步更新，由于有时遇上数据量比较大，数据未完成加载，页面已经刷新了，导致我们看到数据刷新了，页面却未加载出来。关于如何解决这个问题，有如下方法。
一、Vue 不能检测数组和对象的变化
1.1数组渲染场景：

解决方法：
Vue官方文档指定的$set方法：
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 pr

			
		

	





	

		

			

				
					
vue中数组数据怎么转化为json数据

				
			

			

				

					05-12
				

			

		

		

			
				
在Vue中，可以使用`JSON.stringify()`方法将数组数据转化为JSON数据。

例如，假设我们有一个数组`arr`，其中包含多个对象：

```javascript
var arr = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
```

我们可以通过以下方式将它转化为JSON数据：

```javascript
var json = JSON.stringify(arr);
console.log(json);
```

输出结果为：

```javascript
"[{"name":"Alice","age":25},{"name":"Bob","age":30},{"name":"Charlie","age":35}]"
```

注意：如果数组中的对象中有函数或Symbol类型的属性，则会在转换过程中被忽略。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值