关于VUE2.0中v-if使用数组内的条件动态判断无法生效判断

最新推荐文章于 2024-08-24 17:34:35 发布
最新推荐文章于 2024-08-24 17:34:35 发布
阅读量2w 收藏 4
点赞数 7
分类专栏： web前端 文章标签： 前端 vue2.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31659129/article/details/99552612
版权

在使用v-if控制元素显示隐藏时候，如果判断条件是数组中的元素，在一开始页面渲染显示正常，可以用数组内的变量来控制v-if元素，但是以后通过方法直接改变数组内变量却不能影响v-if控制的元素显示隐藏。
你可以使用

this.$set(obj, key, value)/vue.set(obj, key, value)

当你使用的是数组

this.$set(arr, index, value)/vue.set(arr, index, value)

使用这种方式就可以响应式的更改数据
该方法由评论区pigfu提供，亲测可用。
还有在评论区shuiyan说 用Object替换数组即可，亲测可用。

外号蓝大胖
关注
专栏目录
[Vue] | 修改data中的值 v-if 不能动态切换, v-if失效
张音乐的博客
07-08 7805
今天在开发过程中, 用的是根据方法名称调用方法, 来控制一个页面中某些部分的显示和隐藏.最后发现在调用方法时, 修改data中的值, 例如下图所示来控制是否显示的时候, 修改后不能动态控制是否显示,最后经过一番排查, 发现,动态调用的时候需要把当前的this传入方法中执行. 如果你也是使用的动态调用, 那就需要注意喽. <template> <div> <div v-if="visible" style="height: 500px;">
vue v-if判断数组中是否存在某个值 做显示隐藏(iview
不积跬步何以至千里
04-29 5302
多选下拉框 elasticComputeCloudWarningForm.noticeType=[0,1,2,3] <FormItem :label="$t('alarms.common.noticeType')" prop="noticeType"> <Select v-model="elasticComputeCloudWarningForm.noticeType" multiple style="width:300px;" :placeholder="$t('alarms.comm
若依v-hasPermi和v-if的使用
最新发布
wenleyuasdnhy的博客
08-24 314
若依的v-hasPermi和v-if的结合使用
vue v-if v-show v-for 数组
LickDog的博客
12-04 3443
vue v-if v-show v-if 通过创建和销毁DOM来显示或者隐藏DOM元素 v-if可以和v-else-if和v-else一起搭配使用 v-if可以直接作用在template标签上 <template> <div class="home"> <template v-if="false">//此时该template下面的内容都是不可见的 <h1>hahah</h1> &l
v-if 判断数组中是否存在某个值
weixin_44895283的博客
01-08 7532
v-if=“entity.persongroup.filter(function (e) { return e == ‘1501’; }).length != 0”
Vue判断字符串（或数组）中是否包含某个元素
weixin_64310738的博客
02-18 2513
Vue判断字符串（或数组）中是否包含某个元素
vue2.0 可折叠列表 v-for循环展示的实例
10-18
在Vue 2.0中，实现可折叠列表通常涉及到数据绑定、事件监听和条件渲染等核心概念。在这个实例中，我们将探讨如何使用`v-for`循环来遍历数据并展示列表，以及如何通过点击事件控制列表的展开和折叠。下面我们将详细...
实现vue2.0响应式原理
柯闪电，一位前端小白的博客。
06-11 462
很久之前为了面试，看了一些分析源码的博客，没有最近重新看一下vue的源码，匆匆浏览记住一些概念，因为懒惰，后面也没有再去深入探索；前段时间痛定思痛，觉得不能这样下去，过一下vue源码，此文章也是为了记录自己的一些理解。 希望的结果 数据的读写更变 依赖收集 观察者（触发后续的视图更新） let vueData = { number: 9999, list: ['a', 'b', 'c'], tree: { user: 111, mo: '1231
vue.js最全知识点 & 数据动态绑定 & 数据双向绑定 & 类的绑定 & v-if & v-for & 单选与多选框 最齐全的vue.js代码
longlong6682的博客
04-12 1472
目录： 1. vuejs简介 2. 选择器：根据id、class等查找 3. 静态绑定数据 data 4. 插值 {{}}单项绑定 5. 数据动态绑定：computed 6. 数据双向绑定 ：v-model 7. 类的绑定：绑定事件触发时改变 class, id属性 8. 样式的绑定 v-bind:style 9. v-if 条件模板指令 10. v-for循环语句 11. 自定义指令 12. ...
关于vue-cli项目的预渲染方法(prerender-spa-plugin)
vivoom的博客
07-02 817
关于vue-cli项目的预渲染方法(prerender-spa-plugin) 前言：使用vue-cli打包项目一般为spa项目，而单页面应用不利于SEO，故使用需渲染解决方案。 vue-cli2.0版本 1.安装 npm install prerender-spa-plugin --save 2.在build下的webpack.prod.conf.js增加部分代码 'use strict' const path = require('path') const PrerenderSPAPlugin = r
Vue指令学习(v-for、v-cloak、自定义指令...)
weixin_41105030的博客
02-19 1684
Vue是什么? Vue是一套用于构建用户界面的渐进式的MVVM框架，另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 指令 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DO...
v-if动态渲染失效？可能是这个原因
m0_71295326的博客
03-10 760
今天在用v-if时想做出点击切换样式的效果，打印结果flag的值会改变但是样式不变 ，检查了好久发现是他的父盒子使用v-mome，被影响了。
v-if用数组内的值来进行条件判断报错
Blablabla_的博客
10-25 1870
v-if用数组内的值来进行条件判断是会报错的，看文档说v-if只能接受变量，试过，可以用对象来判断 bridshow: { 0: true, 1: false, 2: false } <div class="brid1 brid" v-if="bridshow[0]"> //something else </div> <div class="br...
Vue中v-if失效问题（数据更新，页面没有发生变化）
热门推荐
程邓楠的博客
07-02 1万+
Vue数据更新，页面没有更新 目前做的业务是根据上面表格选中项，动态变化下面对应的表格，效果图如下 问题：console的时候数据一直是有更新的，但是页面始终没有变化 自己尝试了this.$nextTick( ()=>{ .... } ),nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，结果没有实现； 再次尝试了this.$set(this.items,"itemType",selectItem.dictVa..
v-if/v-show状态值为数组某一项，改变不更新视图
qq_40557812的博客
07-31 1661
条件判断 v-if=arr[index]当arr[index]改变的时候试图不会更新变化，这个时候需要做特殊处理（v-show同理） vue官方提供方法 this.$set(this.vifValue,i,false)//vm.$set(arr,index,newValue) 死办法 // this.vifValue[i] = false // let arr = this.vifValue ...
前端Vue获取数据的时候,得到数组,一般都用到的v-if 大于 0
m0_49714202的博客
02-19 2375
v-if="lineData.length > 0"这里特别要注意的是，如果去掉获取图标的时候是另一个样子，所以必须要加 一: v-if = "length > 0"使用目前遇到的两种 1. 第一种情况,是在body里面循环div等元素的时候，给包裹循环div的元素添加v-if,一般的是数组长度 (1)案例 <!-- 这个为获取数组buttonArr --> <el-dropdown @command="updateType" v-if="buttonA
vue动态组件（v-if,v-show,v-for,keep-alive,teleport）
luemeon的博客
07-13 805
切换时有性能开销在 Vue 3 中，得到了标签来包裹它们elvalue'none'性能比较：v-show始终被渲染并保留在 DOM 中（即使初始渲染时组件不显示）相比v-if没满足就不会创建而言，v-show="false"时初始化性能差。
【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
05-06 1118
今天遇见一个问题，就是需要在多个tab页面之间切换的时候，需要保留之前tab页面的查询条件。例如：在前一个A页面输入了一些查询条件后，切换到另一个B页面时候，再次切换到A页面，发现A页面的查询条件会被重置，不会被缓存。 （1）问题描述 问题是这样的，我写了一个【A.vue】页面，在【activited()】钩子函数里面调用查询后端数据的方法，然后在后台系统里面切换路由页签的时候，返回到【A.vue】页面，发现每次切换回【A.vue】页面，这个页面之前的查询条件都会被重置，并且重新查询数据。 这里说的t
Vue动态组件、缓存组件、异步组件、条件渲染v-if,v-for,v-show的区别和举例说明
small red red的博客
12-13 592
当包裹的组件（component）被切换隐藏时，并不会将组件销毁，而是将其缓存起来，下次再次使用时会从缓存中取出复用的过程)Vue.js 具有内置的组件缓存机制，允许你缓存已经渲染过的组件以便在需要时快速重用它们，而不是每次重新渲染。Vue.js 还提供了异步组件加载的功能，这允许你在需要时延迟加载组件，从而提高初始加载性能。函数来定义组件的导入。当使用异步组件时，组件将在需要时进行懒加载，而不是在初始渲染时立即加载。元素来动态地渲染不同的组件。你可以使用动态组件来根据条件或用户交互加载不同的组件。
Vue条件渲染：v-if/v-else-if/v-show与v-for实例解析
在本文档中，我们将深入探讨Vue.js中的条件控制和循环渲染功能，结合计算属性和绑定样式v-bind。首先，我们来了解如何使用Vue的条件语句进行元素的动态展示： 1. **v-if** 和 **v-else-if** 用于基于数据条件的元素...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值