vue实现添加数据和删除

webkaifa0126

3072人浏览 · 2019-07-30 09:46:07

webkaifa0126 · 2019-07-30 09:46:07 发布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.abc {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul v-if="lists.length>0">
				<li v-for="(list,index) in lists">
				    {{list.value}}
					<button type="button" @click="del(index)">删除</button>      <!--点击获取索引-->
				</li>
			</ul>
			<input type="text" ref="input1" v-on:keyup.enter="key" />

		</div>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script src="../../common/js/vue.min.js"></script>
		<script>
			var lists = [];
			let vm = new Vue({
				el: '#box',
				data: {
					lists: lists
				},
				methods: {
					key: function() {
						lists.push({
							value: this.$refs.input1.value
						})
					},
					del: function(index) {
						console.log(index)
						lists.splice(index,1)     <!--根据索引删除-->
					}
					
				}
			})
		</script>
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^