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. Django 系列博客（六）

    Django 系列博客(六) 前言 本篇博客介绍 Django 中的路由控制部分,一个网络请求首先到达的就是路由这部分,经过路由与视图层的映射关系再执行相应的代码逻辑并将结果返回给客户端. Djang ...

  2. SQLite占用资源少原因

    本篇承接上篇SQLite详解的下篇,介绍SQLIte为什么占用资源少的原因?本文主要参考https://blog.csdn.net/hanyingzhong/article/details/46400 ...

  3. C#操作DbConnection类

    一.常用属性 名称 说明 ConnectionString 获取或设置用于打开数据库的字符串.(重写 DbConnection.ConnectionString) ConnectionTimeout ...

  4. [nodejs] nodejs开发个人博客（一）准备工作

    前言 nodejs是运行在服务端的js,基于google的v8引擎.个人博客系统包含对数据库的增删查改,功能齐备,并且业务逻辑比较简单,是很多后台程序员为了检测学习成果,最先拿来练手的小网站程序.我也 ...

  5. Laravel5性能优化技巧

    分享一些 Laravel 开发的最佳实践,还有调优技巧,后面陆续整理中 1.配置缓存信息 使用laravel自带的artisan命令,将所有config里面的配置都缓存到一个文件里. php arti ...

  6. SpringBoot+WebSocket

    SpringBoot+WebSocket 只需三个步骤 导入依赖 <dependency> <groupId>org.springframework.boot</grou ...

  7. Python3 系列之 可变参数和关键字参数

    刚开始接触 python 的时候,对 python 中的 *wargs (可变参数) 和 **kwargs (关键字参数)的理解不是很透彻,看了一下 <Explore Python>一书, ...

  8. GitHub：我们是这样弃用jQuery的

    摘要: 技术债清理流程指南. 原文:Removing jQuery from GitHub.com frontend 译文:GitHub:我们为什么会弃用jQuery? 作者:GitHub 前端工程团 ...

  9. [小知识点] react 性能

    场景: jsx 绑定方法 方法有3种 1: // 在html中,使用箭头函数,自动绑定this class SearchHistory extends React.Component {      c ...

  10. Codeforces442A

    A. Borya and Hanabi time limit per test:2 seconds memory limit per test: 256 megabytes input:standar ...