一个简单的vue的todolist例子

使用Vue.js实现动态列表增删

最新推荐文章于 2024-06-02 22:12:52 发布

原创最新推荐文章于 2024-06-02 22:12:52 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何使用Vue.js框架创建一个可以动态添加和删除元素的列表应用。通过v-model指令双向绑定输入框与数据，点击按钮调用方法更新数据列表，实现了列表项的动态管理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="input" /><button type="button" @click="handleAdd">提交</button>
			<ul>
				<li v-for="(itm,ind) in list" :key="ind">{{itm.name}}<button @click="handelDel(ind)">删除</button></li>
			</ul>
		</div>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					input: '',
					list: [
						{
							id: 1,
							name: 'html'
						},
						{
							id: 2,
							name: 'css'
						},
						{
							id: 3,
							name: 'js'
						}
					]
				},
				methods:{
					handleAdd(){
						let params = {
							id: this.list.length,
							name: this.input
						}
						this.list.push(params)
						this.input = ""
					},
					handelDel(index){
						this.list.splice(index,1)
					}
				}
			})
		</script>
	</body>
</html>