vue.js For循环，vue.js v-for使用
================================
©Copyright 蕃薯耀 2018年11月28日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue For循环</title>
</head>
<body>
<div id="forDiv">
<ul>
<li v-for="obj in persons">{{obj.name}}[{{obj.age}}]</li>
</ul>
<ul>
<li v-for="(obj, index) in persons">
{{index}}、{{obj.name}}[{{obj.age}}]
----<input type="button" @click="deleteBy(index)" value="删除"/>
----<input type="button" @click="updateBy(index, index)" value="属性更新"/>
----<input type="button" @click="updateByObj(index)" value="对象更新"/>
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#forDiv",
data: {
persons: [
{name: "张三", age : 18},
{name: "李四", age : 19},
{name: "王五", age : 17}
]
},
methods: {
deleteBy : function(index){
//splice() 方法从数组中添加/删除项目，然后返回被删除的项目。
//arrayObject.splice(index,howmany,item1,.....,itemX)
//index： 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//howmany : 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
//item1,.....,itemX : 可选。向数组添加的新项目。
this.persons.splice(index, 1);
},
updateBy : function(index, index){
this.persons[index].name=this.persons[index].name + index + "";
},
updateByObj : function(index){
//this.persons[index] = {name: '马六', age : 20};//这样不能直接改变页面显示的值
this.persons.splice(index, 1, {name: '马六', age : 20});//这样使用
//Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。
//pop() 删除并返回数组的最后一个元素
//shift() 删除并返回数组的第一个元素
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
//splice() 删除元素，并向数组添加新元素。
//sort() 对数组的元素进行排序
//reverse() 颠倒数组中元素的顺序。
}
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年11月28日
http://fanshuyao.iteye.com/