您现在的位置是:首页 > 正文

v-if 绑定的数组或对象属性变化不响应问题解决详解

2024-02-01 00:54:56阅读 1


tips:整体内容过长,如果想参考最终解决,直接跳到总结即可;如果想要看一下实际情况,可以耐心浏览。

0.业务介绍

先介绍一下当时的业务场景:

我希望一个动态【动态指发表动态的动态】的评论区默认不展示,用户点击icon才会打开评论区
在这里插入图片描述

代码如下:
在这里插入图片描述

1.使用布尔数组,行不通

思路是,当我mounted钩子函数发送异步请求获取到数据后,初始化数组,当我点击那个icon的时候,在方法里修改数组中对应的位置的值【因为v-for能提供索引i】。v-if根据布尔值的变化展示或隐藏评论区的div

数组变量:isCommentShow:[ ] 或 isCommentShow:{ }

1.1 初始化数组

默认 v-if 的值都是false
在这里插入图片描述

1.2 点击icon修改数组的值

点击 icon 就展示,再点击就隐藏评论区
在这里插入图片描述

1.3 v-if绑定数组对应i位置的值

在这里插入图片描述

1.4 结果

在这里插入图片描述

1.5 如果提前赋值,仍然是不可以的。

在这里插入图片描述
在这里插入图片描述

可以看到仍然不响应

2.使用对象属性替代数组,成功了一点

我们把i作为对象属性,去替代数组的作用。

2.1 初始化对象

注意对象有两种赋值,一个对象:{属性:值}

  • this.对象.属性 = 值
  • this.对象[“属性”] = 值

因为i是一个变量,我们只能用第二种
在这里插入图片描述

2.2 点击icon修改对象的值

修改仍然是一样的,因为语法一样
在这里插入图片描述

2.3 v-if绑定数组对应i位置的值

绑定也是一样的,因为语法一样
在这里插入图片描述

2.4 结果,不行

在这里插入图片描述

2.5 如果提前赋值,只能是被赋值的可以了

在这里插入图片描述

我们可以看到被赋值的可以被触发
在这里插入图片描述

而我们只提前赋值了两个,其他元素都是通过mounted去新增的,后面的元素就不响应v-if了

在这里插入图片描述

当我点击前两个被写死的属性后,之前变化的值才会响应。
在这里插入图片描述

3.双向绑定的修改数据机制

  • 我们使用 v-if 是一个双向绑定的过程 v-if:"isCommentShow[i]"
  • vue对于双向绑定的监视,是通过特定的方式实现的。如果双向绑定的对象是基本类型,则不影响。而如果双向绑定的变量是一个对象,是一个具有多个属性的对象,则需要响应式的绑定
  • vue实现对对象的双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。如果要给对象添加新的属性,此时新属性没有进行过上述过程,是不会响应的
  • 我们如果直接修改变量的值,即this.变量 = 新值这种方式是没有经历重写的set方法的。双向绑定是没办法监听到我们的修改的。所以当我们修改了,输出的也是新值。但是你要让双向绑定知道你修改了才行,不是你改了,双向绑定就立刻知道你改了。
  • 也就是我们需要用vue的规则去改,去通过对象重写的set方法去改对象的属性来达到响应式修改,能够立刻通知到双向绑定的指令,我修改了。
  • 这个规则就是:this.$set(this.对象,属性名,新值)

4.回顾与解决

4.1 回顾

  • 使用数组无法解决v-if无法响应绑定的对象数据变化问题
  • 使用把索引当属性的对象只能在预先写死属性的情况下,被写死的部分才能响应v-if

4.2 解决

1.初始化对象属性使用this.$set()赋值

在这里插入图片描述

2.点击事件更新使用this.$set()更新

在这里插入图片描述

3.v-if绑定

还是访问对象属性,不用变

在这里插入图片描述

4.结果,能随意控制了
为true的情况都显示了评论区的div
在这里插入图片描述

5.总结

  • v-if不要绑定数组元素,无效,数组元素内容的变化无法响应v-if
  • v-if绑定对象属性 {1: true, 2: false},如果提前写死,v-if绑定其中一个属性,则可以生效v-if
  • 如果对象的属性数量不定,是通过某方法的触发去改变对象的属性数量。需要使用$set()去更改对象的值, 如:
//增改都适用
this.$set(this.对象名, 属性名, 新值)

//不可以使用下面的方法更新
this.对象.属性 = 新值
//或者
this.对象[属性] =

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 只要所有修改或者增加属性的语句都使用this.$set() ,就能解决 v-if 无法响应对象中动态变化的属性的问题。

网站文章

  • libevent实现https服务器 热门推荐

    libevent实现https服务器 参考老外服务器代码: + https://github.com/ppelleti/https-example + 确保libevent在2.1.2之上版本。 + 确保系统安装openssl,确保libevent_openssl.so存在 + 搭建支持htt

    2024-02-01 00:54:20
  • 计数排序(counting sort)

    计数排序(Counting sort)是一种稳定的线性时间排序算法。计数排序使用一个额外的数组 C ,其中第i个元素是待排序数组A中值等于 i的元素的个数。然后根据数组 C 来将 A中的元素排到正确的位置。计数排序特征当输入的元素是n个 0 到k 之间的整数时,它的运行时间是Θ\ThetaΘ (n+k)。计数排序不是比较排序,排序的速度快于任何比较排序算法。由于用来计数的数组 C 的长度...

    2024-02-01 00:54:14
  • JAVA中四种线程池

    JAVA中四种线程池

    四种线程池newFixedThreadPoolnewCachedThreadPoolnewSingleThreadExecutornewScheduledThreadPool newFixedThre...

    2024-02-01 00:53:40
  • 轻量级日志管理系统-loki 简单部署

    轻量级日志管理系统-loki 简单部署

    使用grafana开发的loki工具,10分钟手动搭建一个轻量级日志管理系统

    2024-02-01 00:53:32
  • 测试开发工程师面试总结(二)——算法篇

    算法也属于常见面试内容之一,但基本不会超过《剑指offer》的范围,在此附上一篇简书上整理的内容: 第二版java解法 常见的面试题包括以下几类:字符串操作,文件输入输出流及统计,矩阵操作,单例模式等。 1.针对字符串的操作:如字符串反转、字符串去重、含有左右括号的字符串匹配。 含有左右括号的字符串匹配的题目及代码如下: 给定一个字符串,其中的字符只包含三种括号:花...

    2024-02-01 00:53:04
  • 适合 Go 新手学习的开源项目——在 GitHub 学编程

    适合 Go 新手学习的开源项目——在 GitHub 学编程

    作者:HelloGitHub-小鱼干&卤蛋 故事要从 2007 年说起。因为受够了 C++ 煎熬的 Google 首席软件工程师 Rob Pike 召集 Robert Griesemer 和 ...

    2024-02-01 00:52:57
  • 怎么制作gif动态图 QQ动态表情包怎么制作

    怎么制作gif动态图 QQ动态表情包怎么制作

    在平时的聊天中经常会使用到GIF动图,不仅仅可以缓解气氛,还很有趣,那这些动态图是如何制作的呢?没有想象的那么难,今天来看看怎么制作的吧! 1、先准备好素材,要制作什么样的动图,可以是图片也可以是...

    2024-02-01 00:52:50
  • 系统架构设计专业技能 · 系统工程与系统性能

    系统架构设计专业技能 · 系统工程与系统性能

    系统工程的生命周期阶段包括。

    2024-02-01 00:52:42
  • java 接口bean_详解Spring中接口的bean是如何注入的

    java 接口bean_详解Spring中接口的bean是如何注入的

    java 接口bean_详解Spring中接口的bean是如何注入的

    2024-02-01 00:52:14
  • Tomcat的使用

    Tomcat的使用

    Tomcat下载tomcat官网:http://tomcat.apache.org安装直接将下载的tomcat压缩包解压即可*注意:此处建议不要安装在有空格或中文目录下卸载直接将解压的文件删除即可目录解析(apache开源项目通用结构)bin 可执行文件conf 配置文件lib 依赖j...

    2024-02-01 00:52:06