vue set的使用

news/2024/7/9 23:58:07 标签: vue, set, 界面渲染

受 ES5 的限制,Vue.js 不能检测到以下响应式界面更新:
    1. 数组中某一项的变动
        例如:
            arr: [1,2,3,4]
            this.arr[0] = 5
            
    2. 数组长度的改变
        例如:
            arr: [1,2,3,4]
            this.arr.length = 5
            
    3. 对象属性的添加或删除
        例如:
            arr: { name: '', age: '' }
            this.arr.sex = ''

实测效果:
    有些时候实际测试,会发现vue.js其实是可以检测到这些变化的,但不一定
    
vue.js提供了 vue set方法针对以上情况,触发响应视图的更新

语法:
    对象:Vue.set( target, key, value )
    数组:Vue.set( target, index, value )
    
根据上面3种情况依次举例:
    1. 数组中某一项的变动
        arr: [1,2,3,4]
        this.$set(arr, 0, 5)
        
    2. 数组长度的改变
        arr: [1,2,3,4]
        this.$set(arr, 5, '')
        
    3. 对象属性的添加或删除
        arr: { name: '', age: '' }
        this.$set(arr, 'sex', '')
注意:    
    this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用。


http://www.niftyadmin.cn/n/1162544.html

相关文章

Sortable.js 拖放排序插件

Sortable.js是一款轻量级的拖放排序列表的js插件 1. 安装$ npm install sortablejs --save 2. 使用定位到需要排序的对象,创建Sortable对象并添加响应配置设置可以通过方法:var sortable Sortable.create(el,{}) 或者 var sortable new Sortable(el…

react history 历史页面管理

history是为React Router提供核心功能的包。 它能轻松地在客户端为项目添加基于location的导航。 1. 安装npm install --save history 2. 类型import { createBrowserHistory, createHashHistory, createMemoryHistory } from history存在三类history,分别时browse…

Velocity.js 动画框架

网页的交互动效大概分为 css动画,js动画 Animate.css属于css动画框架,Velocity.js属于js动画框架 css动画的优点: 不用进行计算和更改dom 会显得非常流畅。 js动画的优点: 没有css那样的局限性,可以实现更多的…

缓存机制

缓存是指对数据的复用 比较常见的有: 1. 内存缓存 2. 磁盘缓存 电脑的三大核心部件: 1. 中央处理器 计算机的可编程性主要是指对中央处理器的编程。 2. 内部存储器 存储器的种类很多,按用途可以分为&am…

es6 find()和findIndex()查找函数

1. find()用来查找目标元素,找到就返回该元素,找不到返回undefined.查找回调函数,有三个参数语法:array.find((value, index, arr) > {value 匹配对象})2. findIndex()用来查找目标元素,找到就返回元素的位置&…

es6 filter()过滤函数

1. filter()返回符合条件的元素的数组[]筛选回调函数,有三个参数语法:array.filter((value, index, arr) > {value 匹配对象})特殊用法:1. 去掉空字符串、undefined、nullarray.filter((value, index, arr) > {value})2. 数组去重arra…

js区分for,for in,for of,forEach的使用场景

for 循环 结构&#xff1a;for (初始化表达式1; 判断表达式2; 自增表达式3) {// 循环体4} 实例&#xff1a;for (let i 0; i < 5; i) {// 循环体逻辑console.log(i)} for in索引遍历&#xff0c;主要用于循环/迭代对象属性&#xff0c;可以用来循环/迭代数组 对象迭代出…

js some() 与 every() 函数

声明实例数组&#xff1a; const arr [1,2,3,4]1. every()一假即假是对数组中每一项运行给定函数&#xff0c;如果该函数对每一项返回true,则返回true。实例&#xff1a;let result arr.every((val, index, arr) > {val > 2}) // result > false2. some()一真即真是…