vue中this.$set()的用法 | 您所在的位置:网站首页 › 前端setvalue怎么用 › vue中this.$set()的用法 |
我们先看看官网给出的解释: 1、更新数组: 我们有一个数组,包括人员姓名和人员年龄两个属性。 想要实现在页面刚加载的时候改变姓名为李四的人的信息。 首先我们想到的是在mouted函数中直接修改name为李四的人的信息 this.itemList[1] = { name: '李思思', age: 30 } console.log(this.itemList[1]); 但是这时候控制台打印的数据更新了,但是页面视图却没有更新。这时候我们就需要用到this.$set()来更新视图了。 姓名: {{item.name}} 年龄: {{item.age}} data() { return { itemList: [ { name: "张三", age: 18, }, { name: "李四", age: 20, }, { name: "王五", age: 22, }, ], person: { name: '前端劝退师' } } }, mounted() { // 要求 // 修改数组中姓名为李四的人的信息 // this.itemList[1] = { // name: '李思思', // age: 30 // } // console.log(this.itemList); console.log("======================"); this.$set(this.itemList, 1, { name: '李思思', age: 30 }); },2、更新对象: eg:给对象添加一个属性并赋值,上代码: {{person.name}} 自定义成绩 methods: { addScore() { this.person.score = "60" console.log(this.person); // this.$set(this.person, "score", "60"); } }在button事件点击的时候给person对象添加score属性,发现:
我们发现控制台打印的结果显示给person对象添加了score属性并赋值了60,但是在页面上并没有更新新加的score属性和它对应的值,这时候便使用this.$set()来更新视图层了。 methods: { addScore() { // this.person.score = "60" // console.log(this.person); this.$set(this.person, "score", "60"); } }这时候就显示合适了。
注意:this.$set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值。 |
CopyRight 2018-2019 实验室设备网 版权所有 |