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. shell编程基础(一): 基本变量和基本符号

    一.shell历史 Shell的作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行一条,这种方式称为交互式(Interactive),Shell还有一种执行命令的方式称为批处理(Batc ...

  2. 判断本机ip是电信还是网通

    string location = "0";//0是网通 1是电信 Uri uri = new Uri("http://www.ip138.com/ips138.asp& ...

  3. C# Task用法

    1.Task的优势 ThreadPool相比Thread来说具备了很多优势,但是ThreadPool却又存在一些使用上的不方便.比如: ◆ ThreadPool不支持线程的取消.完成.失败通知等交互性 ...

  4. [leetcode](4.21)3. 最长重复子串

    给定字符串 S,找出最长重复子串的长度.如果不存在重复子串就返回 0. 示例 1: 输入:"abcd" 输出:0 解释:没有重复子串. 示例 2: 输入:"abbaba& ...

  5. JSJ—案例谈面向对象

    有人告诉我那里遍地都是对象——我们把所有的程序代码放在main()里面,事实上,那根本就不是面向对象的做法,在Java的面向对象中,我们也会看到类和对象的不同,以及对象是如何让你的生活更美好(至少程序 ...

  6. unable to locate nuget.exe

    今日使用vs 从github fork 一份代码到本地之后,提示项目 unable to locate nuget.exe. 原因:代码托管时未提交 nuget.exe 或其他原因丢失 解决方法:在解 ...

  7. js 元素大小缩放实例

    元素大小缩放是一套连贯事件,按下鼠标不放,拖动鼠标 然后松开. 按下鼠标事件 当按下鼠标时,记录元素大小.鼠标按下的位置.状态位. 拖动鼠标事件 当鼠标拖动时,计算元素调用后的大小. 元素调整后大小 ...

  8. js 依据“；”折行

    function roomIds(roomid) { // var str = roomid.replace(/;/g,'\r\n'); if (roomid) { var str = roomid. ...

  9. router-view在vue2.0中不显示，解决方法

    学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...

  10. Openlayer3中应用的技术

    ol3-ext有很多很丰富的效果,可以不用重复造轮子,ol3-ext示例大全:http://viglino.github.io/ol3-ext/ 在本次项目中使用到了ol3-ext的两个功能:图层管理 ...