使用vue实现可以增加和删除的通讯录

最新推荐文章于 2024-05-15 22:56:27 发布

spy过家家

最新推荐文章于 2024-05-15 22:56:27 发布

阅读量533

点赞数 1

文章标签： vue.js servlet 前端

本文链接：https://blog.csdn.net/zm8454/article/details/126024603

版权

Vue.js 前端开发数据绑定动态增删通讯录

关键词由CSDN通过智能技术生成

使用vue实现可以增加和删除的通讯录

效果图

上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>通讯录</h1>
			<input type="text" placeholder="请输入姓名" v-model="xinxi.name"><br>
			<input type="text" placeholder="请输入电话" v-model="xinxi.phone"><br>
			<input type="radio" name="sex" id="" value="男" v-model="xinxi.sex">男
			<input type="radio" name="sex" id="" value="女" v-model="xinxi.sex">女<br>
			<button @click="click">提交</button><br>
			<table border="1">
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>电话</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in list" :key="index">
					<td>{{index+1}}</td>
					<td>{{item.name}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.sex}}</td>
					<td><button @click="del(index)">×</button></td>
				</tr>
			</table>
		</div>
		<script src="./js/vue (1).js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					xinxi: {
						name: "",
						phone: "",
						sex: "",
					},

					list: []
				},
				methods: {
					del(n) {
						this.list.splice(n, 1);
					},
					click() {
						this.list.push(this.xinxi);
						this.xinxi = [];

					}
				}
			})
		</script>
	</body>
</html>

记得引用vue文件哦！