01 vue mvvm数据形式简单实现todo list功能

技术~子云

已于 2022-10-22 19:39:16 修改

阅读量144

点赞数

分类专栏： vue 文章标签： Vue.js 双向绑定数据驱动事件处理列表渲染

于 2022-10-19 10:10:07 首次发布

本文链接：https://blog.csdn.net/davice_li/article/details/127402326

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>TODo LIST 功能</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="./vue.js"></script>
</head>
<body>
    
	<div id="app">
		<!--双向绑定v-model-->
		<input type="text" v-model="inputValue">
		<!--绑定click事件handleBtnClick-->
		<button v-on:click="handleBtnClick">提交</button>
		<ul>
			<!--循环遍历列表list中的每一个值,并赋值给item-->
			<li v-for="item in list">{{item}}</li>
			
		</ul>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				list:[],
				inputValue:""
			},
			methods:{
				handleBtnClick:function(){
					//alert(this.inputValue)
					this.list.push(this.inputValue),
					this.inputValue=''
				}
			}
		})
	</script>
</body>
</html>