由于 JavaScript 的限制,Vue 不能检测到以下数组的变动:

  • 当你利用索引直接设置一个数组项时,例如: vm.items[indexOfItem] = newValue
    当你修改数组的长度时,例如: vm.items.length = newLength
  • 为了解决第一个问题,Vue 提供了以下操作方法:
    • 通过索引来修改数组,使其能成为响应式,解决直接使用赋值不能响应的问题
      Vue.set(vm.data,2,'huanpu','name')    对数组
      Vue.$set(vm.data,'K','V')  对对象

      1. 参数一表示要处理的数组名称。
      2. 参数二表示要处理的数组的索引。
      3. 参数三表示要处理的数组的值。
  • 为了解决第二个问题,Vue 提供了以下操作方法:
// Array.prototype.splice
vm.items.splice(newLength)

newLength  就是指的你更新的长度

直接给一个数组项赋值,Vue 能检测到变化吗?的更多相关文章

  1. C++为什么不可以把一个数组直接赋值给另一个数组

    今天好奇一个问题, int a[3] = {1,2,3]; int b[3]; b=a; 编译器报错, 网上找了一圈, 大概明白: C++就是如此设定的, 数组不能直接赋值, 可以使用std::cop ...

  2. C# 一个数组未赋值引发的错误

    在电脑前又是一天,后来脑子也糊里糊涂,可能是基础还不牢固,设置断点,找了找问题才发现数组定义出了问题, 我是这样定义数组的,string[] auths ; string auths=new stri ...

  3. 用递归的方法求一个数组的前n项和

    用递归的方法求一个数组的前n项和 public class Demo1 { /* * 用递归的方法求一个数组的前n项和 */ public static void main(String[] args ...

  4. javascript中把一个数组的内容全部赋值给另外一个数组

    如:var a = [1,2,3,4];var b= [];b = a;这个不是把值赋值过去而是b作为a的引用,b改变的是a如何b指向的是一个新数组,a把元素值全部赋值过去? 1.普通数组可以使用   ...

  5. Vue在v-for中给css传递一个数组参数

    需求就是将很多个数据,以进度条的形式展示在页面上,形成一个可视化. 接下来是html代码 <!DOCTYPE html> <html> <head> <tit ...

  6. vue对组件以数组方式赋值的问题

    当从后台直接调接口返回数据 直接将数组array赋值给定义的变量,会导致组件无法更改其它值,例如多选框,多选下拉框,会导致无法选中其它的值,也无法取消当前已赋值的选中项 data() { return ...

  7. vue多个input绑定一个数组变量问题

    对于data中声明的一个数组变量arr=[],在绑定时候可以如下: <div style="margin-top: 10px;margin-left: 40px;"> ...

  8. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  9. Vue不能检测数组或对象变动问题的解决

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 快速构建一个使用axios的vue应用程序(转)

    英文原文:https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ 译文:https://segmentfault.com/ ...

随机推荐

  1. 数据库—ER模型概念设计

    文章目录 ER模型的概念 如何画ER图 ER图转换为关系数据库 ER模型的概念 实体 画图时用方形表示 属性 用椭圆形表示 关系 用菱形表示 主键(主码) 在主属性下面画划线 外键(外码) 这里一般是 ...

  2. 10-flask博客项目

    centos7 编译安装python3.7.1 安装步骤 centos7自带python2,由于执行yum需要python2,所以即使安装了python3也不能删除python21.安装依赖包yum ...

  3. Kafka架构以及一键化部署

    什么是Kafka? Apache Kafka是一个开放源代码的分布式事件流平台,成千上万的公司使用它来实现高性能数据管道,流分析,数据集成和关键任务等相关的应用程序. Kafka的应用场景 构造实时流 ...

  4. Android OpenMAX(五)高通OMX Core实现

    上一节了解了OMX Core提供的内容,这一节我们看看高通OMX Core是如何实现的.本节代码参考自: omx_core_cmp.cpp registry_table_android.c qc_om ...

  5. 理解太阳辐射 DNI DHI GHI

    理解太阳辐射 DNI DHI GHI   DNI: Direct Normal Irradiance 阳光从太阳盘面直接照射到与光路正交的表面,称作直接辐射简写为 DNI. DHI: Diffuse ...

  6. VmWare虚拟机和主机配置为同一网段IP

    参考博客:将虚拟机IP与主机IP设置在同一网段的方法 - 天懿 - 博客园 (cnblogs.com) 主机地址 主机通过WiFi连接,地址信息为: 虚拟机配置 选择编辑-->虚拟网络编辑器-- ...

  7. 常见距离计算的Python实现

    常见的距离有曼哈顿距离.欧式距离.切比雪夫距离.闵可夫斯基距离.汉明距离.余弦距离等,用Python实现计算的方式有多种,可以直接构造公式计算,也可以利用内置线性代数函数计算,还可以利用scipy库计 ...

  8. ABC330

    D 记录每一行,每一列有多少个 o,然后统计答案即可. code E 想到 \(mex^{i \le n}_{i = 1} a_i \le n\) 这整个题就可做了(赛时因为没想到这个,痛失 \(47 ...

  9. Vue学习:22.Vue组件库-Vant

    Vue组件库是一系列预先构建好的.可复用的UI组件集合,它们设计用于加速Vue.js应用程序的开发过程.这些组件通常遵循一定的设计规范,提供统一的外观和交互体验,让开发者能够快速搭建用户界面. 组件库 ...

  10. vue双曲线

    原型 1 <template> 2 <div :class="className" :style="{height:height,width:width ...