当vue的data中的值发生变化后,视图中引用部分的值是否会同时发生变化呢?首先,我们要知道有哪些更新的类型。
更新的类型
1、直接赋值更新。this.heros=[‘ ‘],模板会立即更新。
2、通过函数更新。this.heros.push("xx)。
更新的函数:
push():在数组最后添加元素;
pop():删除最后一个元素;
shift():删除最后一个元素;
unshift():在开头添加一个元素;
splice():可以增加、修改、删除元素。splice函数使用方法:其需要传递开始操作元素的索引,影响的元素个数。如是:在指定位置增加元素,其第二个参数(影响元素个数)必须为0,如果为其他的则变成了修改元素了。其核心思想为:从开始影响的索引元素开始,根据传递的第二个元素判断,将会影响后面的几个元素,然后,根据后面的items值,去影响,如果items的个数多于影响个数,则会在被影响元素后面添加剩余的元素;如果,只有起始元素索引和影响元素,则会将影响元素删除。
vue的set()方法
在vue中,直接通过下标修改元素的值或增加新的属性,视图是不会自动更新的。此时,需要使用set()方法。
更新值时是第一个参数是要【更新的对象】,第二个参数是对象中【要更新的索引】,第三个参数是【更改后的值】。
增加属性时第一个参数是具体要添加的对象(如果是数组中某一项,则要通过索引直接指明),第二个参数是要添加属性的【属性名】,第三个参数是【属性值】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue触发视图更新</title> </head> <body> <div id="app"> 书名: <ul> <li v-for="book in books" key="book">{{book}}</li> </ul> <button @click="update_1">直接更新</button> <button @click="update_2">通过函数更新</button> <button @click="pop_1">通过函数<span style="color: red;">删除最后一个元素</span> </button> <button @click="shift_1">通过函数<span style="color: red;">删除第一个元素</span> </button> <button @click="unshift_1">在开头添加一个元素</button> <button @click="splice_add">在第2个元素后增加多个元素</button> <button @click="splice_update">修改第2个元素的值</button> <button @click="splice_update_add">修改第2个值,并在其后添加元素</button> <button @clicK="splice_del">删除第2个数</button> <button @click="update_set">set方法变更值</button> <div v-for="book in books_2"> {{book.title}}:{{book.author}} </div> <button @click="set_2">补上作者</button> </div> <script> new Vue({ el: ‘#app‘, data: { books: [‘三国演义‘, ‘水浒传‘, ‘数据结构‘, ‘操作系统‘], books_2: [{ title: ‘水浒传‘, author: ‘施耐庵‘, }, { title: ‘三国演义‘, author: ‘罗贯中‘, }, { title: ‘西游记‘, author: ‘吴承恩‘, }, { title: ‘红楼梦‘, }, ] }, methods: { update_1() { this.books = [‘三国演义‘, ‘水浒传‘, ‘红楼梦‘] }, update_2() { this.books.push("西游记") }, pop_1() { this.books.pop() }, shift_1() { this.books.shift(); }, unshift_1() { this.books.unshift(‘这是四大名著‘) }, splice_add() { this.books.splice(2, 0, ‘计算机网络基础‘, ‘计算机组成原理‘) }, splice_update() { this.books.splice(1, 1, ‘红楼梦‘) }, splice_update_add() { this.books.splice(1, 1, "红楼梦", "史记") }, splice_del() { this.books.splice(1, 1) }, update_set() { Vue.set(this.books, 2, ‘西游记‘) }, set_2() { Vue.set(this.books_2[3], ‘author‘, ‘曹雪芹‘, ) } } }) </script> </body> </html>
原文地址:https://www.cnblogs.com/xshan/p/12333827.html
时间: 2024-10-19 01:16:12