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

最新推荐文章于 2024-06-20 10:43:02 发布
最新推荐文章于 2024-06-20 10:43:02 发布
阅读量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
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
快速解决vue动态绑定多个class的官方实例语法无效的问题
10-18
今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue动态绑定class失效，这个原因我是真没想到，发出来大家看看
HN-XX-PYY的博客
06-27 8862
先说一下我想要实现的功能，就是点击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_55209970的博客
06-20 933
方法和计算属性在Vue3中都可以用于处理和操作数据，但它们在使用和性能上有一些关键的区别。计算属性是一种具有缓存机制的响应式对象，只有当其依赖的数据发生变化时才会重新计算。而方法没有缓存机制，每次页面更新时都会重新执行，无论数据是否变化。虽然方法和计算属性得到的结果一样 还是要多使用计算属性？
vue动态class点击没反应
userzou的博客
03-25 4413
:class="item.id==activeId?'active-list':'search-list'" vue动态class点击不显示的时候，没反应，在动态的class后加一个!important
Vue 动态添加class可能带来的问题（被覆盖）
weixin_45143856的博客
11-24 2334
Vue 动态添加class可能带来的问题（被覆盖）
[Vue][:class]Vue动态绑定class错误分析
qq_31103801的博客
04-11 989
问题 我使用 :class 动态绑定样式表，出现以上问题 看代码 它的父级我在 Vue 应用里已经绑定了 并且 data 中包含 activeWho 属性 但是它依然报错，说是这个属性没有定义 但是代码能正常工作 可是强迫症看着难受 思考 经过试验以及思考 我终于明白是什么问题了 我们在body后边引用vue写好的js代码，它才会工作 并且在代码里边没有直接操作document的地方 而是使用 new 关键字创建对象 所以一切的document操作在创建vue时进行 此时vue进行分析dom节点
关于Vue中动态绑定class和style的问题
yawang_的博客
10-28 3278
一、需求 今天碰到同事问了一个问题，根据后端返还的字段名字来绑定该名字的独有颜色，例如：'提现成功' --- 绿色。'提现失败' --- 红色。 她是这样写的：:style="[{item.status == '提现成功' ? 'color:green': ''},{item.status == '提现失败' ? 'color:red': ''}]",很显然，样式没有生效。 二、问题 其实这就是Vue给我们的动态绑定写法格式问题，只不过我去翻了官网，并没...
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的 DOM 将与数据保持同步，每当数据有改动，...
vue动态绑定class的几种常用方式小结
10-16
在Vue.js中，动态绑定`class`是一种常见且强大的特性，允许我们根据组件的状态或数据来改变元素的样式。本文将详细讲解Vue中几种常用的动态绑定`class`的方法。 1. **对象方法** - **基础绑定**：最简单的方式是...
vue动态绑定 class 的丰富案例
最新发布
08-07
本资源将全方位地为您呈现 v-bind 动态绑定 class 的丰富案例，其中涵盖了绑定字符串、数组、对象以及函数等详尽且深入的案例分析。仅需这一篇，就能让您对 v-bind 动态绑定 class 有全面而透彻的理解。
【vue3】数据绑定，动态渲染class与style
芳草萋萋鹦鹉洲哦
03-28 5955
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式（style）。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了。
vue中的router-link不能动态绑定class
xuefeng11111的博客
05-08 2857
刚刚才发现，vue中的router-link好像在动态绑定class方面有问题，如下图如果这个样子动态绑定router-link的class和div的class，你会发现，div的class动态绑定没有问题，当鼠标经过div的时候，div的颜色会发生改变，但是如果你的鼠标经过router-link的时候，你会发现，router-link的颜色并不会发生改变，我把动态绑定的方法几乎试遍了，还是没有解...
vue动态绑定class、style的几种方法
weixin_43534452的博客
06-28 7954
vue动态绑定样式
解决class绑定数组，改变数组不更新view问题
Lora_0925的博客
05-20 367
首先我们先思考一下，vue的数据是怎么更新的，绑定原理是什么。 众所周知，vue2采用的数据劫持是使用object.defineproperty()方法，但是object.defineproperty()方法并不完美，它的缺陷，主要表现在两个方面： 1.无法检测到对象属性的新增或删除 　由于js的动态性，可以为对象追加新的属性或者删除其中某个属性，这点对经过Object.defineProperty方法建立的响应式对象来说，只能追踪对象已有数据是否被修改，无法追踪新增属性和删除属性，这就需要另外处理。
vue2 中双向绑定失效的几种情况，以及如何解决
jt15881622410的博客
06-13 6343
当在异步操作（如定时器、Ajax请求、Promise等）中修改数据时，Vue可能无法即时检测到数据的变化，导致双向绑定失效。如果在Vue实例初始化之后，动态地添加新的属性到数据对象上，Vue也无法追踪这些属性的变化，从而导致双向绑定失效。当直接对Vue组件中的对象或数组进行赋值时，Vue将无法捕获到该变动，导致双向绑定失效。传递的父组件属性时，Vue不会自动更新父组件的属性，导致双向绑定失效。总结起来，解决Vue 2中双向绑定失效的方法包括使用Vue提供的。来触发自定义事件并更新父组件的属性。
vue动态绑定class
小傲哥哥的博客
02-10 334
其中 errorClass 每个元素是原有的样式，active是动态切换的样式。
vue绑定失效的问题（操纵组件不更新）
qq_21496041的博客
12-16 633
更改时间选择器后时间选择器不更新，但是实际的数据却更新了。在父组件给子组件赋值时，首先将res赋值给child.data，但是res中并没有period属性，导致child.data中的period丢失，与组件的绑定断开，后续过程中再给child.data增加peroid属性后也无法建立绑定
vue中动态绑定class名称
xiaomao_wxj的博客
05-19 1967
Vue项目中动态绑定class类名的各个方法总结
vue框架 v-model双向绑定对象属性值不能修改的问题
qq_41102329的博客
07-05 5243
v-model绑定的值修改不了，
vue 动态绑定class
09-14
在Vue中，动态绑定class有多种方法。第一种方法是使用对象语法，可以根据条件来动态地添加或删除class。例如，可以使用`v-bind:class`指令在`<div>`元素上绑定一个对象，对象中的属性名对应要绑定的class名，属性值...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值