Vue.set用于为对象或者数组赋值，弥补了Vue数组操作的不足。
Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
example下新建Vue.set.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.set</title>
<!-- 引入Vue.js -->
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue.set</h1>
<hr>
<!-- 根节点必须有 -->
<div id="app">
插值表达式输出：{{count}}
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<button @click="change">change</button>
</div>
<script type="text/javascript">
// 定义在app实例外面的对象
var outData = {
count:1,
arr:['aaa','bbb','ccc']
}
var app = new Vue({
el: '#app',
// 引入app实例外面的对象
data: outData,
methods:{
change:function(){
// Vue.set操作变量
// app.count++;
// outData.count++;
// Vue.set(app,'count',10);
// Vue.set(outData,'count',15);
// Vue.set通过数组下标操作数组元素
Vue.set(app.arr,1,"dd");
}
}
})
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
</head>
<body>
<h1>My Vue 2.x</h1>
<hr>
<ol>
<!-- （一）Vue2.X——起步并输出HelloWorld -->
<li><a href="./example/helloworld.html">Hello World</a></li>
<!-- （二）Vue2.X——v-if、v-else、v-show -->
<li><a href="./example/ifelseshow.html">v-if v-else v-show</a></li>
<!-- （三）Vue2.X指令——v-for -->
<li><a href="./example/v-for.html">v-for</a></li>
<!-- （四）Vue2.X指令——v-text、v-html -->
<li><a href="./example/v-text.html">v-text v-html</a></li>
<!-- （五）Vue2.X指令——v-on -->
<li><a href="./example/v-on.html">v-on</a></li>
<!-- （六）Vue2.X指令——v-model -->
<li><a href="./example/v-model.html">v-model</a></li>
<!-- （七）Vue2.X指令——v-bind -->
<li><a href="./example/v-bind.html">v-bind</a></li>
<!-- （八）Vue2.X指令——v-pre、v-cloak、v-once -->
<li><a href="./example/v-others.html">v-others</a></li>
<hr>
<!-- （九）vue.directive自定义指令 -->
<li><a href="./example/Vue.directive.html">Vue.directive</a></li>
<!-- （十）Vue2.X全局API——Vue.extend构造器扩展 -->
<li><a href="./example/Vue.extend.html">Vue.extend</a></li>
<!-- （十一）Vue2.X全局API——Vue.set全局操作 -->
<li><a href="./example/Vue.set.html">Vue.set</a></li>
</ol>
</body>
</html>
