vue.对列表增删操作_vue中list的添加和删除

作者：AllinToyou | 2024-03-12 12:14:16

踩

vue中list的添加和删除

先看效果图，实现增删操作，还有对输入框的数据非空，查重，添加后清空文本框内容


<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
 
	<body class="container">
		<style>
			.a1 {
				background: white;
			}
			.red {
				background: greenyellow;
			}
		</style>
 
		<div id="app">
			姓名：<input class="form-control" v-model="name" /><br /> 性别：
			<input class="form-control" v-model="sex" /><br />
			<button class="btn btn-primary" @click="adda(1)">添加</button>
			<table class="table table-bordered">
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr v-for="(a,index) in tables" :class="a.xx">
					<td>{{index}}</td>
					<td>{{a.name}}</td>
					<td>{{a.sex}}</td>
					<td>
						<button class="btn btn-primary" @click="adda(index) ">添加</button>
						<button class="btn btn-danger" @click="pop(index)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				xx: "",
				el: "#app",
				data: {
					isshow: false,
					none: false,
					name: '',
					sex: '',
					xx: '',
					show: true,
					tables: [{
							name: '常丕丽1',
							sex: '男',
							xx: ""
						},
						{
							name: '常丕丽2',
							sex: '女',
							xx: ""
						},
						{
							name: '常丕丽3',
							sex: '男',
							xx: ""
						}
					]
				},
				methods: {
					adda: function(index) {
						var iii = true
						for(var i = 0; i < this.tables.length; i++) {
							if(this.name == this.tables[i].name) {
								iii = false;
								break;
							}
						};
						if(iii == false) {
							alert("内容重复")
						} else {
							if(this.name == "" || this.sex == "") {
								alert("姓名或为空")
							} else {
								if(index == 1) {
									this.tables.push({
										name: this.name,
										sex: this.sex,
										xx: 'red'
									});
									this.name = "";
									this.sex = '';
								} else {
									this.tables.splice(index + 1, 0, {
										name: this.name,
										sex: this.sex,
										xx: 'red'
									})
								}
							}
						}
 
					},
					pop: function(index) {
						this.tables.splice(index, 1)
					}
				}
			})
		</script>
	</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/224051