1. 程式人生 > >vue2.0 vue.set()

vue2.0 vue.set()

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()