效果图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span>ID</span><input type="text" name="" id="" v-model="tempmodel.id"><br>
<span>姓名</span><input type="text" name="" id="" v-model="tempmodel.name"><br>
<span>性别</span><input type="text" name="" id="" v-model="tempmodel.sex"><br>
<span>电话</span><input type="text" name="" id="" v-model="tempmodel.phone"><br>
<span>地址</span><input type="text" name="" id="" v-model="tempmodel.address"><br>
<input type="button" value="添加" v-on:click="add"><br>
<label for="" >查询电话</label>
<input type="text" name="" id="" v-model="keyword">
<table border="1">
<tr v-for="(item,index) in keyword.length>0? relist:list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.phone}}</td>
<td>{{item.address}}</td>
<td @click="shan(index)">删除</td>
</tr>
</table>
</div>
<script src="js/vue.js"></script>
<script>
var vue=new Vue({
el:"#app",
data:{
tempmodel:{
id:"",
name:"",
sex:'',
phone:"",
address:''
},
list:[{
id:1,
name:"沙",
sex:'男',
phone:141554326,
address:'基调温度计'
}
,
{
id:2,
name:"巩",
sex:'女',
phone:324536,
address:'维文热'
},
{
id:3,
name:"白白",
sex:'男',
phone:34236236,
address:'全天候'
}],
keyword:"",
relist:[]
},
watch:{
keyword:function(newVal,oldVal){
var ret =this.list.filter(m=>m.phone.toString().includes(newVal.toString()));
this.relist=ret;
}
},
methods:{
shan:function(index){
this.list.splice(index,1)
},
add:function(){
this.list.push(this.tempmodel),
this.tempmodel={
id:"",
name:"",
sex:'',
phone:"",
address:''
}
}
}
})
</script>
</body>
</html>
