Vue.js高效前端开发(增删查)

效果图

代码：

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/773906.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！