首页 > 其他分享 >vue2 - vue.set 添加属性与修改属性,修改数组的注意事项

vue2 - vue.set 添加属性与修改属性,修改数组的注意事项

时间:2023-02-17 12:24:40浏览次数:32  
标签:vue vm Vue 修改 set 数组 属性

1.vue.set 添加属性与修改属性

Vue.set(target,propertyName/index,value)

vm.$set(target,propertyName/index,value)

<div id="root">
  <button v-on:click="addAttr">点击添加属性</button>
</div>

<script>
  const vm = new Vue({
    el: "#root",
    data: {
      obj: {
        id: "001"
      },
      array: [1,2,3]
    },
    methods: {
      addAttr(){
        // Vue.set(this.obj,"name","levi1").
        this.$set(this.obj,"name","levi1");
        this.$set(this.array,3,"levi");
      }
    }
  });

Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性,只能给根对象下的对象添加属性

 

2.修改数组的注意事项

在Vue修改数组中的某个元素一定要用这些方法:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

或者是Vue.set() 或 vm.$set() 修改数组,不然vue无法监听到数组中的数据发生了改变就不会刷新页面

标签:vue,vm,Vue,修改,set,数组,属性
From: https://www.cnblogs.com/ErenYeager/p/17129729.html

相关文章

  • vue2 - 条件渲染,列表熏染
    1.条件熏染v-if(1).v-if="表达式"(2).v-else-if="表达式"(3).v-else="表达式"适用于:切换频率较低的场景特点:不展示的DOM元素直接被移除注意:v-if可以和:v-else-if,v-e......
  • Maven本地仓库修改
    阿里云镜像 <mirror><id>nexus-aliyun</id><mirrorOf>central</mirrorOf><name>Nexusaliyun</name><url>http://maven.aliyun.com/......
  • vue2和vue3的响应式区别
    vue响应式依赖的函数vue2vue2中依赖es5的Object.defineProperty属性,该方法可以在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。监听的是对象......
  • vue项目打包后,自由修改配置如接口地址等
    背景描述:项目打包后,如果想更换接口域名或者项目名称,就需要再次打包。但是这样子操作有点耗费时间。如果把这些配置写到一个文件中,然后在index.html文件中引入使用,这样子......
  • vue+elementUI 实现设置还款日字母弹窗组件
    1、业务背景还款业务,设置每月还款日,选每月几号扣款,不需要29、30、31,因为不是每个月都有这三天的2、预期效果图3、代码实现3.1初始化vue项目地址:https://cn.vuejs.or......
  • vue中的echarts地图
    地图万能模板+地图配置+全国数据+地图重绘0.echarts图表只能在mounted生命周期函数调用,created钩子中页面还没挂载1、样例that.chart0=this.$echarts.init(document......
  • vue 面试
    vue是什么是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架.vue特性有数据驱动(MVVM),组件化,指令系统什么是spasinglepageapplicati......
  • 2023前端开发最新面试题收集-Vue2/3篇
    Vue整理1、谈谈MVVM的理解MVC(react):数据流是单向的,View和Model之间通过controller连接通信,用户操作会请求服务器,路由拦截分发请求,调用对应的控制器controller,控制器会......
  • 安装vue脚手架@vue/cli 4.5.13(稳定版)
    若NPM下载过慢,请参考本处改换镜像源:Here首先新建一个vue测试项目,还记得以前自己是用vue-cli2.0的版本去构建的,毕竟里面有默认配置好的webpack配置,但现在很多小伙......
  • CSS 之 z-index 属性详解
    一、简介本文主要是对z-index属性进行详细的讲解,包括其使用场景、属性效果、适用范围等等。本博客的所有代码执行的浏览器环境,都是以Chrome浏览器为准。1、属性作用z-ind......