效果图
代码：
<!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>
