案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）
生活随笔
收集整理的這篇文章主要介紹了
案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
案例：圖書管理
Vue數組操作
1、變異方法：會影響數組的原始數據的變化。
2、替換數組：不會影響原始的數組數據，而是形成一個新的數組。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div><span><input type="text" v-model='fname'><button @click='add'>添加</button><button @click='del'>刪除</button><button @click='change'>替換</button></span></div><ul><li :key='index' v-for='(item,index) in list'>{{item}}</li></ul></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {fname: '',list: ['apple','orange','banana']},methods: {add: function(){this.list.push(this.fname);},del: function(){this.list.pop();},change: function(){this.list = this.list.slice(0,2);}}});</script> </body> </html>補充知識（數組響應式變化）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><ul><li v-for='item in list'>{{item}}</li></ul><div><div>{{info.name}}</div><div>{{info.age}}</div><div>{{info.gender}}</div></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*動態處理響應式數據*/var vm = new Vue({el: '#app',data: {list: ['apple', 'orange', 'banana'],info: {name: 'lisi',age: 12}},});// vm.list[1] = 'lemon'; //不是響應式的Vue.set(vm.list, 2, 'dymhh');vm.$set(vm.list, 1, 'lemon');// vm.info.gender = 'male'; //不是響應式的vm.$set(vm.info, 'gender', 'female');</script> </body> </html>總結
以上是生活随笔為你收集整理的案例：图书管理——补充知识（数组相关API）||补充知识（数组响应式变化）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 生命周期
- 下一篇： 组件化开发思想||全局组件注册语法||组