03-vue写一个简单的todolist

先贴代码:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>03-todolist</title>
	<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="box">
		<input type="text" v-model="mytext" />
		<button type="button" @click="handleAdd()">Add</button>
		<hr>

		<div v-if="datalist.length">
			<p>LIST</p>
			<ul>
				<li v-for="(data,index) in datalist" :key="index">{{data}}--{{index}}
					<button type="button" @click="handleDel(index)">Del</button>
				</li>
			</ul>
		</div>
		<div v-else>待办事项空空如也</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el: "#box",
			data: {
				mytext: "",
				datalist: []
			},
			methods: {
				handleAdd() {
					console.log("add")
					this.datalist.push(this.mytext)
					this.mytext = ""
				},
				handleDel(index) {
					console.log("del", index)
					this.datalist.splice(index, 1)
				}
			}
		})
	</script>
</body>

</html>

Vue绑定的id为box的div中

先放一个input输入框和一个添加的button按钮,用来添加待办事项

下面放一个div,里面用列表遍历添加的待办事项并渲染到页面上,每一个待办事项后加一个删除的button按钮,用于删除该项。

在data中定义一个mytext为空字符串,并用v-model绑定到输入框中,定义一个datalist为空数组,用于渲染页面待办事项列表。

add按钮使用@click点击事件绑定一个handleAdd函数,del按钮使用@click点击事件绑定一个handleDel函数。

Vue的函数写在methods中。

使用v-if和v-else来控制div的创建于删除,当待办事项列表即datalist为空(datalist.length===0)时,列表不显示,显示绑定v-else的div。

当datalist中有数据时,显示列表。

input输入框输入内容后,同步到mytext的值,点击add按钮,触发handleAdd函数,将mytext数据追加到datalist中,并将mytext值重置为空,页面同步渲染datalist数据。

当点击del删除按钮时,通过handleDel(index)传入该项的索引值,触发handleDel函数,使用splice将datalist中对应索引值项删除,页面同步渲染删除后的datalist数据。

就实现了简单的todolist功能。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论