<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.set全局操作</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <h1>vue.set</h1> <div id="app"> <p>{{count}}</p> <!-- <p><button @click="add">add</button></p> 第一种：通过调用方法里的函数 --> <ul> <li v-for="item in array">{{item}}</li> </ul> <p><button onclick="jia()">jia</button></p> </div> </body> <script type="text/javascript"> function jia(){ //p标签里的值改变操作 3种方法 //Vue.set(outData,'count',5);//括号 第一个参数是对象，第二个是 改变的具体对象 第三个是 改变后的值 //app.count++; //outData.count++; //下面是 ul li 值改变操作 app.$data.array[1]='ddd'; //改变第二个li里的值 第一种方法 //app.array[1]='ddd'; //改变 第二个li里的值 第二种方法 //Vue.set(app.array,1,'ddddddd') // 括号里 第一个是 改变的数组，第二个是 数组具体对象，第三个是改变的具体址 以上两个方法 通过下标改变数组值 vue是监测不到的，有限制 所以使用 Vue.set 方法 } var outData={ // 在构造器外面声明数据 count:1, goods:'car', array:['aaa','bbb','ccc'] } var app=new Vue({ el:"#app", data:outData, // 把在构造器外面声明的数据赋值给构造器 methods:{ add:function(){ this.count++ } } }) </script> </html>