关于v-for中使用v-if或者v-bind:class失效的问题

最新推荐文章于 2024-05-14 10:37:00 发布
最新推荐文章于 2024-05-14 10:37:00 发布
阅读量5.1k 收藏 2
点赞数 1
分类专栏： 个人笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42345079/article/details/80521132
版权

在v-for循环出来的列表中使用v-bing动态绑定class、v-show或v-if动态控制个别item   场景一般多用于多项选择

原因是在v-for循环的时候 items是动态创建，所以不会被监听并且实时动态控制class



解决方法是  vm.$set    官方文档中有介绍

我的解决方法使用了框架自带多选按钮，将样式呈现出来



但仅仅是样式呈现，在循环items的时候，给它新增属性isSelect


然后在点击选择的时候，动态设置isSelect属性


在提交的时候去循环判断该list每一项的isSelect属性，从而达到同样的效果

爱情与灵药cium
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记一次v-for 渲染元素点击动态绑定class的出坑之路
M_Estelle的博客
09-28 358
点击前 点击后 需求：动态渲染问题的题目以及选项，因为题目类型有多选，且选择顺序与答案正确与否相关，所以自己做了选项被选中的效果 <div v-for="(item,index) in filterColor" :key="index" @click="itemClick(index)"> <div class="title-box" :class="isActive[index]?'active-color':''"> <di..
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
今天小编就为大家分享一篇解决v-for中使用v-if或者v-bind:class失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中v-if与v-for的优先级和注意事项
最新发布
阿牛哥的博客
05-14 865
在Vue.js中，和是两种常用的指令，它们在模板中控制元素的渲染方式。理解它们之间的优先级和如何正确使用它们对于编写高效的Vue应用至关重要。在Vue模板编译时，和都会被转换成可执行的函数。在Vue的源码中，的判断优先于。 Vue源码分析 在Vue的源码中，的处理优先于，这意味着在渲染过程中，Vue会先进行列表渲染，然后才进行条件判断。 计算属性示例 四、流程图 下面是和在Vue模板中的处理流程的简化流程图：Vue模板v-forv-if列表渲染条件判断 在Vue中，和的处理流程可以通过以下简化流程图来表
【Debug】v-if的节点加了class导致了数据不能加载
ahaohaoo的博客
03-13 526
v-if的作用：创建与销毁。会根据v-if的布尔值来判断要创建还是销毁。 class类名：一般是用来添加样式 在使用vue框架时，v-if和class类名难免会混用在一起。 区别是： 如果v-if的节点上没有class类名的话，v-if在刚开始是不会渲染的。在执行的过程中，会判断v-if的布尔值，如果是true则渲染节点。 如果v-if的节点上有class类名的话，v-if在刚开始就会渲染一次，然后在执行的过程中，会判断v-if的布尔值，如果是true则再次渲染节点。一共会渲染2次 ..
v-if、v-for、列表的过滤与排序、强制绑定class和style、收集表单信息
m0_60376759的博客
07-20 713
如果我们传递参数不光要事件对象，还需要自己定义的参数，那么此时，需要在函数调用的时候，传递两个，一个是。函数调用是自己加括号调用，调用的时候，vue会自动在我们写的函数调用外层添加一个函数，这个函数才是真正的回调。通过数组的方法去修改整个对象也是可以修改的，因为vue当中重写了数组的部分原生方法，额外添加了展示到页面的功能。修改数组当中对象的属性，都是可以修改的，因为对象的所有属性都添加了get和set方法（响应式数据），vif指令都是需要进行解析的，指令进行解析的过程是很消耗性能的，这样效率就会很低下。.
在vue中使用v-bind:class的选项卡方法
10-17
在本例中，我们将学习如何使用`v-bind:class`实现一个简单的选项卡功能。 首先，我们需要理解Vue的数据驱动概念。Vue的核心理念是通过声明式的数据绑定，将数据与视图紧密关联起来。当数据发生变化时，视图会自动...
详解vue中v-bind:style效果的自定义指令
10-15
在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而自定义指令则是Vue提供的一种扩展机制，允许开发者自定义DOM操作。 1. **自定义指令**：...
Vue 实现v-for循环的时候更改 class的样式名称
10-15
在Vue.js中，当需要在`v-for`循环中为每个元素动态地更改CSS类时，我们可以利用`v-bind:class`指令。`v-bind:class`允许我们根据数据动态地绑定一个或多个类。这里我们将详细讲解如何实现这个功能，并提供一个实例来...
在vue中v-bind使用三目运算符绑定class的实例
10-17
今天小编就为大家分享一篇在vue中v-bind使用三目运算符绑定class的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 常用内置指令（v-if、v-for，进阶学习
m0_57541068的博客
03-18 398
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】觉得这些内容对你有帮助，可以添加下面V无偿领取！
Vue(三)：绑定样式、条件渲染(v-if，v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序
weixin_51000853的博客
09-04 676
方法来排序，计算属性的强大之处，只要get里用到的数据（keyword，sortType）发生改变，get都会重新执行，模板都会重新解析，这个业务逻辑就实现了。（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的，不写的时候默认index作为key。（2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
vue中v-for绑定数组，当数组变化时页面数据不更新，：class和：style失效的原因
qq_42661587的博客
09-07 2377
问题：点击事件里改变了数组内容，但是：class和：style没有监听到样式，从而页面样式没有一同改变。 原因： 根据vue的官方文档说明：Vue 包含一组观察数组的变异方法，所以它们将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reverse() splice 替换 写法 array.splice(index,n,data1,data2,......); 参数 index：需要替换的元素的...
【Vue】transition标签不生效
Yss915的博客
12-07 2651
transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个 transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示否则不生效！ 动画 CSS 样式对应的类名 进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画（Vue2）离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画（Vue2）进入：.v-enter-from 始状态、.v-enter-t
transition动画过渡没作用（无效）
热门推荐
weixin_45689946的博客
10-27 1万+
transition无效的原因 1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。 css .header { position: relative; width: 200px; height: 50px; background: red; transition: all 0.3s ease-in-out; } .showMenu.layui-layout-admin .header{ left:-200px; } js $(".moveHandle").click(functio
Vue指令中的v-bind之动态更改样式
cattleya_ada的博客
09-29 4045
{{}}不能在html属性中使用，我们要采用v-bind绑定属性。 语法：v-bind:属性名，可以简写为:属性名 每个绑定，都只能包含单个表达式。代码如下： &lt;style&gt; .yuan{ width: 100px; height: 100px; border-radius: 50%; background...
VUE v-if 在 v-for 中没有反应
东四先生的博客
12-06 997
v-if 在 v-for 中没有反应
:class v-bind class没有效果 无效果
wsy12123_的博客
11-26 1716
v-bind class失效的原因之一 :class 无效果的原因之一
v-bind:class失效问题
weixin_30527423的博客
08-22 944
当我想通过事件改变button的样式，发现怎么也不变。可能有以下原因： button添加了元素选择器 在 :class中最好对固定的类（f-right）的判断值true加上引号 :class="{ 'f-right': 'true','btn':isDisabled==false,'check_btn_grey': isDisabled==true}" 元素中可以存在静态样...
在v-for中使用v-bind
09-14
在v-for中使用v-bind的作用是将一个动态的属性绑定到每个循环项上。通过使用v-bind指令，我们可以动态地将属性绑定到每个循环项上，并根据不同的数据设置不同的属性值。这样可以实现更灵活的数据绑定和渲染效果。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值