vue 数据更新,视图未更新,原因,解决方法

2023-11-09

复现问题:

<template>
    <div> 
        <p>{
  {classInfo.number}}<p>
        <p>{
  {classInfo.address}}<p>
    </div>
</template>
export default {
    
    data() {
        return {
            classInfo:{}
          }
    }
    
    created() {
        setTimeOut(()=>{
            this.classInfo.number = 100,
            this.classInfo.address = 'china',
        },1000)
    }
}

此时发现页面并没有获取到更新后的值,原因是:

classInfo,中属性,并没有被劫持,所以classInfo的数据不是响应式的。

数据被劫持一般有两种,第一,data初始化时data中的属性,虽然data中有classInfo属性,但是classInfo中并没有任何属性,所以classInfo的属性,没有在data中劫持,但是classInfo本身被劫持了

第二,是计算属性,很明显这不是计算属性

第三,使用set设置了这个属性,代码中没有设置。

 

因此根据上面的原因分析:有三种解决方案。

1.初始化的时候设置classInfo属性,使得初始化的时候

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 数据更新,视图未更新,原因,解决方法 的相关文章

  • erp系统多少钱一套

    erp系统多少钱一套 鼎捷ERP来告诉你 ERP价格与企业的规模和职工数有关 几千块的有 从几万到几十万的也有 企业自身规模200 上千人 ERP价格几万到几十万不等 这个规模的公司 一般在行业里面都做的不错 订单量也不错 对生产过程要求比
  • Java基础-继承

    对外是一个对象 内部还是两个空间 子类信息还是放在子类空间中 父类信息还是放在父类空间中 继承的特点 子类可以继承父类的属性和行为 但是子类不能继承父类的构造器 Java是单继承模式 一个类只能继承一个直接父类 Java不支持多继承 但是支
  • JavaGUI(JavaFX)程序打包成jar包和直接运行的exe文件全过程一条龙手把手教学

    文章目录 1 先打包成jar包 Intellij IDEA为例 2 下载exe4j 3 使用exe4j打包生成可直接运行的exe文件 1 先打包成jar包 Intellij IDEA为例 在file中 gt Project Structur

随机推荐

  • 点击和滚动监听事件(接口)监听器

    点击和滚动监听事件 接口 实现方法 加载适配器
  • python 安装chromadb报错:hnswlib

    conda install c conda forge hnswlib
  • 《Python 计算机视觉编程》学习笔记(一)

    Python计算机视觉编程 文章目录 前言 第 1 章 基本的图像操作和处理 引言 1 1 PIL Python图像处理类库 图像读取 显示 显示对应灰度图 更改图像格式 后缀 创建缩略图 复制和粘贴图像区域 调整尺寸和旋转 1 2 Mat
  • opencv实践项目-修改表格缺失轮廓

    目录 1 背景 2 修复步骤 2 1 图像灰度化 并进行高斯模糊 2 2 对图像进行阀值处理 2 3 查找轮廓 2 4 利用存储的值了解表格的位置 2 5 提取所有的水平线和垂直线 2 6 合并垂直和水平的两个模版 3 完整代码 1 背景
  • 如何去掉 Discuz标题后缀power by discuz

    如何去掉 Discuz标题后缀power by discuz 打开如下文件 template default common header common htm php 找到如下代码 navtitle G setting bbname Pow
  • Package包 和 Library库 理解

    Library 库 一组相关功能的模块的集合 import的类库 最常用的有java util等 通过动态链接在程序中实现功能 Package 包 一个有层次的文件结构 Java源文件第一条语句 解决类冲突 包名要与文件夹一致
  • KVM管理工具

    kvm实现方式 qemu工具 qemu kvm qemu img qemu 处理器模拟器 仿真各种IO设备 将仿真设备连接至主机的物理设备 提供用户接口 基本格式 qemu kvm 选项 磁盘镜像文件 标准选项 machine type n
  • 数组应用(C): 数据求均值

    数组应用 数据求均值 问题描述 由键盘输入读取整型数据 数据数量不超过100个 当读取到数据 1时 停止读取数据 并计算这些数据的均值 不包含 1 问题分析 给定了数据数量不超过100 若将每个输入数据分别赋值给变量 a1 a2 a3 a4
  • Aop监控所有Controller,包括void类型的response中的出参(工具类)

    一 主要坐标
  • 了解实现一个高并发的内存池——TLS Memmory Pool

    为什么需要内存池 1 效率问题 如果我们直接向系统申请内存 当我们需要频繁的申请释放内存时 就需要频繁的与系统层产生交互 多次切换用户态和内核态 而用户态和内核态之间的切换的消耗是非常大的 因此申请内存的消耗就会很大 程序效率也就随之降低了
  • 数据结构—判断一棵二叉树是否是完全二叉树(java)

    判断一棵二叉树是否是完全二叉树 一 完全二叉树的三种节点 完全二叉树有右树必有左树 节点编号和满二叉树一一对应 1 度为2的节点有n个 2 度为1的节点只能有1个 3 度为0的节点有n个 二 具体思路 1 分两个阶段 第一阶段所有节点都有左
  • Linux下安装Lua脚本

    yum install libtermcap devel ncurses devel libevent devel readline devel curl R O http www lua org ftp lua 5 3 5 tar gz
  • 密码学与网络安全-基本概念

    安全方法 安全模型 无安全性 隐藏安全 一件事物不为人知 那么它是安全的 如密码 类比代码实现防范 路径 端口等 主机安全性 网络安全性 安全管理 向有关方面解释安全策略 该要介绍每个人的责任 建立可监察性 提供预期和定期审查 安全原则 举
  • mongodb内置角色

    开发十年 就只剩下这套Java开发体系了 gt gt gt 1 内置角色组织结构图 2 角色解释 2 1数据库用户角色 针对每一个数据库进行控制 read 提供了读取所有非系统集合 以及系统集合中的system indexes system
  • 【技能树笔记】网络篇——练习题解析(二)

    目录 前言 一 数据链路层的作用 1 1 数据链路层作用 1 2 数据链路层封装 1 3 数据链路层功能 1 4 数据帧格式 二 MAC地址及分类 2 1 MAC地址 2 2 MAC地址分类 三 交换机的作用 3 1 交换机的作用 3 2
  • STM32CubeMX使用教程——使用485总线接收变送器数据

    STM32CubeMX使用485总线接收变送器数据 一 要使用的外设 二 使用STM32CubeMX生成工程 引脚配置 时钟树配置 工程管理 生成项目 三 代码编辑 四 注意事项 一 要使用的外设 USART1 引脚PA9 PA10 用于打
  • 压力测试-JMeter的多种形式参数化

    在使用JMeter做压力测试 接口测试时 面对数据量比较大的情况下一个一个的去设置肯定会非常影响效率 所以参数化的方式必不可少 本文分享JMeter常用的几种参数化的形式 准备工作 创建基础API框架 新建测试计划 创建线程组 创建HTTP
  • blender中常用快捷键的总结

    学习过程中遇到较为重要的blender快捷键 总结 在移动 G 缩放 S 旋转 的时候 按住 XYZ 代表限定方向 alt R G S代表重置 扩展 R在进行旋转的时候按鼠标滚轮会定位到最近的坐标轴 进行校对 shift A 创建一个对象
  • 无线通信(LoRa和zigbee,补充WIFI)

    原文 1 LoRa是物联网应用中的无线技术有多种 可组成局域网或广域网 2 ZigBee是基于IEEE802 15 4标准的低功耗局域网协议 1 简介 LoRa 是LPWAN通信技术中的一种 是美国Semtech公司采用和推广的一种基于扩频
  • vue 数据更新,视图未更新,原因,解决方法

    复现问题