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. sql多表数据查询

    有时候在sql遇到一次查询多张表的全部数据例如:创建一张虚拟表A ,表A中需要有表B和表C的全部数据(表B和表C并集,如图) 有两种方法一种是使用: 1):union,不过这种查询速度比较慢 /* B ...

  2. mysql 数据库的备份与还原 at winows

    把cmd的当前目录切换到mysql安装目录; 备份数据库world mysqldump -u root -p  world < c:\all.sql 导入数据库 新建schema world 常 ...

  3. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

  4. curl模拟ip和来源进行网站采集的实现方法

    对于限制了ip和来源的网站,使用正常的采集方式是不行的.这里说我的一种方法吧,使用php的curl类实现模拟ip和来源,可以实现采集限制ip和来源的网站. 1.设置页面限制ip和来源访问比如服务端的s ...

  5. Discuz网警过滤关键词库

    积累近几年discuz关键词过滤 使用方法:1.进入后台/内容/词语过滤批量添加.2.打开CensorWords.txt,复制里面的文本信息到批量添加的输入框内,点击确定即可.如图: 关键词下载:Ke ...

  6. linux内核里的字符串转换 ,链表操作常用函数(转)

    1.对双向链表的具体操作如下: list_add ———向链表添加一个条目 list_add_tail ———添加一个条目到链表尾部 __list_del_entry ———从链表中删除相应的条目 l ...

  7. Redis 持久化之RDB和AOF

    Redis 持久化之RDB和AOF Redis 有两种持久化方案,RDB (Redis DataBase)和 AOF (Append Only File).如果你想快速了解和使用RDB和AOF,可以直 ...

  8. python文件

    目录 1. 文件的概念 1.1 文件的概念和作用 1.2 文件的存储方式 2. 文件的基本操作 2.1 操作文件的套路 2.2 操作文件的函数/方法 2.3 read 方法 -- 读取文件 2.4 打 ...

  9. python基础学习(十三)函数进阶

    目录 1. 函数参数和返回值的作用 1.1 无参数,无返回值 1.2 无参数,有返回值 1.3 有参数,无返回值 1.4 有参数,有返回值 2. 函数的返回值进阶 例子:显示当前的湿度和温度 例子:交 ...

  10. 为什么越来越少的人用jQuery

    摘要:JQuery该退役了. 原文:为什么越来越少的人用jQuery 作者:Lemonade Fundebug经授权转载,版权归原作者所有. 最早期的开发,大多都使用jQuery,它给我们带来了很多的 ...