02 vue TodoList 实现第二篇

技术~子云

已于 2022-11-03 07:43:18 修改

阅读量82

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-10-21 08:43:57 首次发布

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

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

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

<title>Examples</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)
					//将输入的值压入list列表中
					this.list.push(this.inputValue),
					//将输入框的值清空
					this.inputValue=''
				}
			}
		})
	</script>
</body>
</html>