vue实现添加数据和删除

Vue.js列表操作与事件监听

最新推荐文章于 2024-08-08 19:57:45 发布

原创最新推荐文章于 2024-08-08 19:57:45 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

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