<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todolist</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id = "text">
<div>
<input v-model = "msg"/> <!--双向绑定-->
<button @click = "Submit">提交</button> <!--@click绑定事件-->
<ul>
<li v-for = "(item,index) of list " key = "index">{{item}}</li><!--循环集合-->
</ul>
</div>
</div>
<script>
new Vue({
el: "#text",
data: {
msg : '消息',
list : []
},methods : {//与click相对应的方法写到这里
Submit : function(){
this.list.push(this.msg)//动态往list中添加元素
this.msg = ''//将输入框中的消息清空
}
}
})
</script>
</body>
</html>
vue中的todolist,动态往list中赛值
最新推荐文章于 2023-11-29 09:37:13 发布