<!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>
