标签：cli 修改 引用 计算 methods 网络基础 method cal doctype
当vue的data中的值发生变化后，视图中引用部分的值是否会同时发生变化呢？首先，我们要知道有哪些更新的类型。
1、直接赋值更新。this.heros=[‘ ‘]，模板会立即更新。
2、通过函数更新。this.heros.push("xx)。
push()：在数组最后添加元素；
pop()：删除最后一个元素；
shift()：删除最后一个元素；
unshift()：在开头添加一个元素；
splice()：可以增加、修改、删除元素。splice函数使用方法：其需要传递开始操作元素的索引，影响的元素个数。如是：在指定位置增加元素，其第二个参数（影响元素个数）必须为0，如果为其他的则变成了修改元素了。其核心思想为：从开始影响的索引元素开始，根据传递的第二个元素判断，将会影响后面的几个元素，然后，根据后面的items值，去影响，如果items的个数多于影响个数，则会在被影响元素后面添加剩余的元素；如果，只有起始元素索引和影响元素，则会将影响元素删除。
<!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>
标签：cli 修改 引用 计算 methods 网络基础 method cal doctype
原文地址：https://www.cnblogs.com/xshan/p/12333827.html
