vue 示例 todolist

最新推荐文章于 2022-12-07 21:32:07 发布

purple_lumpy

最新推荐文章于 2022-12-07 21:32:07 发布

阅读量169

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/purple_lumpy/article/details/81158595

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

万年不变的todolist

<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue" />
			<button @click="handleclick">提交</button>
		</div>
		<ul>
			<li v-for="(item,index) of list" :key="index">
				{{item}}
			</li>
		</ul>
	</div>

	<script >
		new Vue({
			el: "#root",
			data: {
				inputValue: "",
				list: []
			},
			methods: {
				handleclick: function(){
					this.list.push(this.inputValue);
					this.inputValue = '';
				}
			}
		})
	</script>
</body>
</html>