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小例子的更多相关文章

  1. 基于vue-cli、elementUI的Vue超简单入门小例子

    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...

  2. 使用Vue编写点击数字小游戏

    使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果 ...

  3. vue +bootstrap 写的小例子

    最近vue挺火,最近也不是特别忙,就学习了下. vue和angular非常像都是MVVM.道理都是想通的,就是语法的差异 我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2 ...

  4. hibernate课程 初探单表映射1-11 通过hibernate API访问编写第一个小例子

    hibernate 业务流程 1 创建配置对象 Configuration config  = new  Configuration().configure(); 2 创建服务注册对象 Service ...

  5. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  6. Vue.js的小例子--随便写的

    1.领导安排明天给同事们科普下vue 2.简单写了两个小例子 3.话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta ...

  7. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  8. Runtime的几个小例子（含Demo）

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  9. 五个小例子教你搞懂 JavaScript 作用域问题

    众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...

随机推荐

  1. Apollo 10 — adminService 全量发布

    目录 UI 界面 Portal 服务 admin 服务 总结 1. UI 界面 2. Portal 服务 当我们点击上面的发布按钮的时候,调用的当然是 portal 的接口.具体代码如下: /** * ...

  2. Spark内存管理机制

    Spark内存管理机制 Spark 作为一个基于内存的分布式计算引擎,其内存管理模块在整个系统中扮演着非常重要的角色.理解 Spark 内存管理的基本原理,有助于更好地开发 Spark 应用程序和进行 ...

  3. 怎么将XML字符串转换为XmlDocument，并获取部分节点值

    我们的目标:解析XML字符串,并获取节点:z:row下的属性:ows_LinkFilename的值集合??? XML字符串数据结构如下: <listitems xmlns:s='uuid:BDC ...

  4. SSLTLS 服务器瞬时 Diffie-Hellman 公共密钥过弱【原理扫描】解决说明

    一.  修改SSL密码套件 1.1  加固方法: 1.1.1  操作步骤: 第一步:按下' Win + R',进入"运行",键入" gpedit.msc",打开 ...

  5. H5 五子棋源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Redirection

    Typically, the syntax of these characters is as follows, using < to redirect input, and > to r ...

  7. 如何用ABP框架快速完成项目(14) - 结尾? 当然不是, 这只是开始!

    此文当前版本号: 3 最近更新时间: 2018-12-9 04:52   本课程是方向性课程, 目的是避免南辕北辙. 方向盘一旦打正确, 还得需要以下文章去写好具体程序: 前面每篇文章里面的链接, 比 ...

  8. 唯一索引的一种使用情景【有则U无则I】

    这个知识点是最近一位面试老师问我的,当时对这种方法不了解,所以只能说那个中效率低的方法了,也就是先进性select判断,然后在执行更新或者插入操作,显然这种是很麻烦的,也自我反思一下,确实有很多的知识 ...

  9. Android 直接修改dex破解

    直接修改dex破解 一．编写一个简单的验证程序 (1)MainActivity: protected void onCreate(BundlesavedInstanceState) { super.o ...

  10. springboot 常见请求方式

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/80404645 本文出自[赵彦军的博客] 用户模型类 package com.yib ...