set全局操作,修改数据
<body>
<h1>vue.set全局操作<h1>
<hr>
<div id="app">
{{count}}
<ul>
<li v-for="item in arr">
{{item}}
</li>
</ul>
</div>
<!-- onclick绑定方法必须有括号 -->
<p><button onclick="add()">add</button></p>
<script type="text/javascript">
function add(){
//3种方法都可以更新内容
//Vue.set(outData,'count',2);//1.每次点击按钮后,内容变成2
//app.count++;//2.每次内容+1
//outData.count++;//3.每次内容+1
//改变数组内容 没有count改变时数组改变不能生效。。
//app.arr[1]='ddd';//数组下标方式改变内容,Vue监测不到,必须用set方式改变
Vue.set(app.arr,1,'ddd');//
Vue.set(app.arr,3,'232');//增加数组元素
}
//构造器外边赋值给构造器
var outData = {
count:1,
// goods:'car',
arr:['aaa','bbb','ccc'],
}
var app = new Vue({//构造器
el:'#app',
data:outData,
})
</script>
</body>