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

W少年没有乌托邦

已于 2024-04-09 17:13:47 修改

阅读量299

点赞数 3

分类专栏： Vue.js前端高效开发文章标签： vue.js 前端 javascript

于 2024-04-01 18:29:30 首次发布

本文链接：https://blog.csdn.net/mr_wangzu/article/details/137154132

版权

Vue.js前端高效开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

代码：

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