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>
网页效果图：
由于编者水平有限，文章中如有不妥之处或者有什么疑问，请直接在下面评论指出，不胜感激。