vue2.0 vue.set()
阿新 • • 發佈:2017-09-08
utf-8 logs har cti java function script 引用 html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="vue2.2.js"></script> <title>Vue.set 全局操作</title> </head> <body> <h1>Vue.set 全局操作</h1> <div id="app"> <ul> <li v-for=" item in arr">{{item}}</li> </ul> </div> <button onclick="add()">外部添加</button> <script type="text/javascript"> function add() { console.log("我已經執行了"); //vm.arr[1] = ‘d‘; 用數組下標監測不到數據更新 Vue.set(vm.arr,1,‘d‘); } var outData = { arr: [‘a‘, ‘b‘, ‘c‘] }; var vm = new Vue({ el: ‘#app‘, data: outData })</script> </body> </html>
外部數據,就是不在Vue構造器裏裏的data處聲明,而是在構造器外部聲明,然後在data處引用就可以了。外部數據的加入讓程序更加靈活,我們可以在外部獲取任何想要的數據形式,然後讓data引用。
在外部改變數據的三種方法:
1、用Vue.set改變
function add(){
Vue.set(outData,‘count‘,2);
}
2、用Vue對象的方法添加
app.count++;
3、直接操作外部數據
outData.count++;
vue2.0 vue.set()