数组变异方法：
push() 追加到末尾
pop() 从末尾移除
shift() 删除第一个元素
unshift() 追加元素到数组的前面
splice() 删除指定下标的元素
sort() 排序
reverse() 反转
替换新数组 vm.array=newarray
简单的写了一下表单管理，写了表单的几个基本增、删、查。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>条件渲染</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div>
<h1>数组的操作</h1>
<ul>
<li>push() 追加到末尾</li>
<li>pop() 从末尾移除</li>
<li>shift() 删除第一个元素</li>
<li>unshift() 追加元素到数组的前面</li>
<li>splice() 删除指定下标的元素</li>
<li>sort() 排序</li>
<li>reverse() 反转</li>
<li>替换新数组 vm.array=newarray</li>
</ul>
</div>
<div id="app">
<label>学生：</label>
<input type="text" v-model='name'>
<label>年龄：</label>
<input type="text" v-model='age'>
<button type="button" @click='addstu'>添加</button>
<button type="button" @click='addstuhead'>添加（头部）</button><br/>
<button type="button" @click='flystu'>升序</button>
<button type="button" @click='downstu'>降序</button>
<p>
<label>筛选</label>
<input type="text" v-model="filterstudent">
</p>
<table border="1" width='50%' cellspacing='0'>
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>管理</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in (bool?newarray:student)'>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button type="button" @click='delestu(index)'>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
student:[{
name:'aaa',
age:20
}],
name:'',
age:20,
filterstudent: "",//过滤筛选
newarray: [],//新数组
bool: false, //布尔用于判断三元表达式循环
},
methods:{
addstu(){
this.student.push({name:this.name,age:this.age})
},
//添加到头部
addstuhead(){
this.student.unshift({name:this.name,age:this.age})
},
//删除
delestu(index){
this.student.splice(index,1)
},
//排序
flystu(){
return this.student.sort((a,b)=>a.age-b.age)
},
downstu(){
return this.student.sort((a,b)=>b.age-a.age)
},
//查询
filterArray() {
var _filterstudent =this.filterstudent //变量接收模糊查询输入框的值
// 新数组接收
this.newarray = this.student.filter(function (value, index, arr) { //filter() 参数1元素 参数2下标 参数3对象本身
return value.name.indexOf(_filterstudent) != -1; //匹配不到返回-1 不等于-1就是查找的到 返回匹配的值 用新数组接收
});
}
},
watch: {
filterstudent(newvalue,oldvalue) { //监听双向绑定的变量
if (newvalue == "") { //如果新值为空时
this.bool = false; //布尔为false 上面循环渲染的还是原数组
} else { //否则相反
this.filterArray(); //调用上面的方法
this.bool = true; //布尔为true 循环新数组
}
}
}
});
</script>
</body>
</html>
效果图：