如何使用vue完成todolist页面

当学习完react再回过头来看vue,就会发现,vue操作起来比react简单多了,下面让我们看看使用vue如何完成todolist吧。
思路:首先我们还是一样,首先我们创建一个input框,一个button,一个ul li的list列表,这时我们先在input上使用v-model双向绑定一个inputValue,当我input框中的内容改变时,inputValue就会跟着改变,那么我们创建一个list的空数组,然后当我点击button时,就可以将inputValue中的数据push到list数组中,最后在ul li中使用v-for循环出来就可以了,是不是非常简单呢!

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" name="" v-model="inputValue">
		<button @click="handleBtn()">submit</button>
		<ul>
			<li v-for='item in list'>{{item}}</li>
		</ul>
	</div>


	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				inputValue:'',
				list:[]
			},
			methods:{
				handleBtn:function(){
					this.list.push(this.inputValue)
					this.inputValue=''
				}
			}
		})
	</script>
</body>
</html>
发布了23 篇原创文章 · 获赞 1 · 访问量 480

猜你喜欢

转载自blog.csdn.net/mini74/article/details/105342972