Vue编写的todolist小例子
本篇博客主要包含一个内容：
1.第一个内容：使用Vue编写todolist例子，包含的主要知识是v-model，v-for，el表达式，以及Vue中使用methods。
闲话少叙，直奔主题。
1.第一个内容
使用input中的v-model绑定data中的inputValue，然后button的点击事件handleSubmit将inputValue放入list数组中，v-for使item在list中循环，{{item}}为el表达式，将item的值循环显示出来。
直接上代码：
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="utf-8" />
-
<title>todolist</title>
-
<meta name="viewport" content="width=device-width, initial-scale=1">
-
<script src="./Vue2.5.17.js"></script>
-
</head>
-
<body>
-
<div id="root">
-
<div>
-
<input type="text" v-model="inputValue">
-
<button @click="handleSubmit">提交</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: {
-
handleSubmit: function () {
-
this.list.push(this.inputValue)
-
this.inputValue=''
-
}
-
}
-
})
-
</script>
-
</body>
-
</html>
网页效果图：
由于编者水平有限，文章中如有不妥之处或者有什么疑问，请直接在下面评论指出，不胜感激。
扫一扫
592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
