Vue编写的todolist小例子

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的值循环显示出来。

直接上代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>todolist</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <script src="./Vue2.5.17.js"></script>
  8. </head>
  9. <body>
  10.     <div id="root">
  11.         <div>
  12.             <input type="text" v-model="inputValue">
  13.             <button @click="handleSubmit">提交</button>
  14.         </div>
  15.         <ul>
  16.             <li v-for="(item,index) of list" :key="index">
  17.                 {{item}}
  18.             </li>
  19.         </ul>
  20.     </div>
  21.  
  22.     <script>
  23.         new Vue({
  24.             el: "#root",
  25.             data:{
  26.                 inputValue:'',
  27.                 list: []
  28.             },
  29.             methods: {
  30.                 handleSubmit: function () {
  31.                     this.list.push(this.inputValue)
  32.                     this.inputValue=''
  33.                 }
  34.             }
  35.         })
  36.     </script>
  37. </body>
  38. </html>

网页效果图:

Vue编写的todolist小例子

由于编者水平有限,文章中如有不妥之处或者有什么疑问,请直接在下面评论指出,不胜感激。

上一篇:jQuery的fancybox插件


下一篇:IPSEC VPN配置实例