核心提示：vue v-for注意事项（代码）!DOCTYPE htmlhtmlhead title/title meta charset=UTF-8 script src=https://cdnjs.cloud...
vue v-for注意事项（代码）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<p id="for">
<p v-for="(n,i) in numbers">
{{n}}
</p>
<button v-on:click="changeNum">click me!!!</button>
<p class="" v-for="p in persons">{{p.name}}</p>
<button v-on:click="add">click me ~！！！</button>
</p>
</body>
<script type="text/javascript">
new Vue({
el : "#for",
data : {
numbers : [1,2,3,4,5],
persons : [
{
id : 1,
name : "zhu"
},
{
id : 2,
name : "yu"
},
{
id : 3,
name : "jing"
}
]
},
methods : {
changeNum : function () {
Vue.set(this.numbers,1,10);//DOM重新渲染
//this.numbers[1]=100; DOM没有重新渲染
alert(this.numbers[1])
},
add : function () {
// DOM重新渲染 push 方法vue重新封装了 并不是js中的push方法
this.persons.push({
id : 4,
name : "add one"
})
}
}
})
</script>
</html>
