vue动态绑定class时遇到的问题

最新推荐文章于 2024-07-24 10:50:10 发布
最新推荐文章于 2024-07-24 10:50:10 发布
阅读量9k 收藏
点赞数 3
分类专栏： Vue学习 文章标签： vue 前端 动态绑定class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VladimirZL/article/details/79345752
版权
在Vue项目中遇到动态绑定class的奇怪问题，当尝试通过button点击改变数组元素来更新div class时，发现只有直接修改基本类型值时页面才会响应渲染。在setTimeout模拟异步操作后，修改数组项无法触发视图更新。问题在于Vue对数组的变动检测不敏感，而对象和基本类型的更改则可以。期待解答这个问题的原因。
摘要由CSDN通过智能技术生成

写项目的时候遇到一个很奇怪的问题，可能是我对vue的了解很浅，希望有大神能帮我解决一下，问题如下

本来想实现动态绑定class，却发现了很奇怪的问题，代码如下
这里写图片描述

这里写图片描述
从代码看，是个很简单的逻辑， 通过button点击变色，使data中的值改变，从而给div绑定新的class，因为在真正的项目中click是一个ajax请求，为了制造异步，我用了一个setTimeout，一秒钟之后再改变值，页面如下

最低0.47元/天 解锁文章
VladimirZL
关注
专栏目录
vue 中动态绑定class 和 style的方法代码详解
08-27
主要介绍了vue 中动态绑定class 和 style的方法，通过实例结合的形式给大家接受的非常详细，需要的朋友参考下吧
vue动态绑定 class 的丰富案例
最新发布
08-07
本资源将全方位地为您呈现 v-bind 动态绑定 class 的丰富案例，其中涵盖了绑定字符串、数组、对象以及函数等详尽且深入的案例分析。仅需这一篇，就能让您对 v-bind 动态绑定 class 有全面而透彻的理解。
快速解决vue动态绑定多个class的官方实例语法无效的问题
10-18
今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue：动态绑定class
weixin_52104111的博客
07-24 186
动态绑定class的方法多得琳琅满目；：绑定多个class。
vue动态绑定class失效，这个原因我是真没想到，发出来大家看看
HN-XX-PYY的博客
06-27 8976
先说一下我想要实现的功能，就是点击li标签，给这个li标签加上颜色和底边框。函数里能获取到li的index下标，但是class切换没有效果 HTML代码： ​ <ul class="menuUl"> <li v-for="(li,index) in lis" @click="SelectLi(index)" :class="{isSelectedLi:SelectedLi===index}" :key="index"> {{li}}
Vue 动态添加class可能带来的问题（被覆盖）
weixin_45143856的博客
11-24 2402
Vue 动态添加class可能带来的问题（被覆盖）
vue动态class点击没反应
userzou的博客
03-25 4429
:class="item.id==activeId?'active-list':'search-list'" vue动态class点击不显示的时候，没反应，在动态的class后加一个!important
:class v-bind class没有效果 无效果
wsy12123_的博客
11-26 1820
v-bind class失效的原因之一 :class 无效果的原因之一
vue动态绑定class的几种常用方式小结
12-08
本文实例讲述了vue动态绑定class的几种常用方式。分享给大家供大家参考，具体如下： 对象方法 最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染） :class="{ 'active': isActive }" 判断是否...
vue给组件设置class无效
NEFU_kadia的博客
05-10 2181
解决方法 父页面的style去掉scope，或者在一个新style标签里写组件的css
[Vue][:class]Vue动态绑定class错误分析
qq_31103801的博客
04-11 1024
问题 我使用 :class 动态绑定样式表，出现以上问题 看代码 它的父级我在 Vue 应用里已经绑定了 并且 data 中包含 activeWho 属性 但是它依然报错，说是这个属性没有定义 但是代码能正常工作 可是强迫症看着难受 思考 经过试验以及思考 我终于明白是什么问题了 我们在body后边引用vue写好的js代码，它才会工作 并且在代码里边没有直接操作document的地方 而是使用 new 关键字创建对象 所以一切的document操作在创建vue时进行 此时vue进行分析dom节点
难点三！！！Vue绑定class属性时无效
qq_41818857的博客
06-07 3981
class后面绑定的值应该以{}方式呈现 错误写法： <ul> <li v-for="(item,i) in cityList" @click='select(i)' :class="active:activeIndex===i"> {{item}} </li> </ul> 正确写法： <ul> <li v-for="(item,i)
vue :class 动态绑定样式_vue-class动态绑定
weixin_39966765的博客
11-22 6419
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。vue官方文档对于class和style绑定有两种方法，对象语法和...
vue中的class绑定
yth_m_123的博客
05-20 229
本文将介绍如何动态绑定html元素的class与style。 首先绑定class的方法有： 1.对象语法绑定 <div class='sortList'> <ul> <li v-for="item in list"> <i v-bind:class="class1:class1Data,class2:class2Data">font-size</i>{{item.sort}} </li> &lt
vue中的router-link不能动态绑定class
xuefeng11111的博客
05-08 2863
刚刚才发现，vue中的router-link好像在动态绑定class方面有问题，如下图如果这个样子动态绑定router-link的class和div的class，你会发现，div的class动态绑定没有问题，当鼠标经过div的时候，div的颜色会发生改变，但是如果你的鼠标经过router-link的时候，你会发现，router-link的颜色并不会发生改变，我把动态绑定的方法几乎试遍了，还是没有解...
Vue组件点击事件不触发的问题，添加事件修饰符native解决
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 7985
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
解决class绑定数组，改变数组不更新view问题
Lora_0925的博客
05-20 391
首先我们先思考一下，vue的数据是怎么更新的，绑定原理是什么。 众所周知，vue2采用的数据劫持是使用object.defineproperty()方法，但是object.defineproperty()方法并不完美，它的缺陷，主要表现在两个方面： 1.无法检测到对象属性的新增或删除 　由于js的动态性，可以为对象追加新的属性或者删除其中某个属性，这点对经过Object.defineProperty方法建立的响应式对象来说，只能追踪对象已有数据是否被修改，无法追踪新增属性和删除属性，这就需要另外处理。
Vue3 样式绑定
qq_44336097的博客
04-17 487
Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。 v-bind:class 可以简写为 :class。 class 属性绑定 我们可以为 v-bind:class 设置一个对象，从而动态的切换 class: <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title&
vue动态绑定class
小傲哥哥的博客
02-10 378
其中 errorClass 每个元素是原有的样式，active是动态切换的样式。
vue 动态绑定class
09-14
在Vue中，动态绑定class有多种方法。第一种方法是使用对象语法，可以根据条件来动态地添加或删除class。例如，可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值为条件。当属性值为真时，对应的class会被添加到元素上。例如，可以使用以下代码来动态绑定class： ```html <div :class="{'active': isActive}">文字</div> ``` 其中，`isActive`是一个布尔值，如果`isActive`为真，则`active`类会被添加到`<div>`元素上。 第二种方法是使用数组语法，可以根据多个条件来动态地添加或删除class。可以使用`v-bind:class`指令在`<div>`元素上绑定一个数组，数组中的每个元素都是一个条件表达式或者是一个class名。如果条件表达式为真，则对应的class会被添加到元素上。例如： ```html <div :class="[activeClass, errorClass">文字</div> ``` 其中，`activeClass`和`errorClass`都是字符串类型的class名，如果它们对应的条件为真，则对应的class会被添加到`<div>`元素上。 第三种方法是使用对象语法的缩写形式，可以更简洁地绑定class。可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值为布尔值。如果属性值为真，则对应的class会被添加到元素上。例如： ```html <div :class="{activeTwo: isActive, 'activeThree': hasError}">文字</div> ``` 其中，`isActive`和`hasError`都是布尔值，如果它们为真，则`activeTwo`和`activeThree`类会被添加到`<div>`元素上。 这些方法都可以实现动态绑定class，并根据条件来添加或删除class，以实现样式的动态改变。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值