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的值循环显示出来。
直接上代码：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>todolist</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <script src="./Vue2.5.17.js"></script>
- </head>
- <body>
- <div id="root">
- <div>
- <input type="text" v-model="inputValue">
- <button @click="handleSubmit">提交</button>
- </div>
- <ul>
- <li v-for="(item,index) of list" :key="index">
- {{item}}
- </li>
- </ul>
- </div>
- <script>
- new Vue({
- el: "#root",
- data:{
- inputValue:'',
- list: []
- },
- methods: {
- handleSubmit: function () {
- this.list.push(this.inputValue)
- this.inputValue=''
- }
- }
- })
- </script>
- </body>
- </html>
网页效果图：
由于编者水平有限，文章中如有不妥之处或者有什么疑问，请直接在下面评论指出，不胜感激。
Vue编写的todolist小例子的更多相关文章
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
- 使用Vue编写点击数字小游戏
使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果 ...
- vue +bootstrap 写的小例子
最近vue挺火,最近也不是特别忙,就学习了下. vue和angular非常像都是MVVM.道理都是想通的,就是语法的差异 我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2 ...
- hibernate课程 初探单表映射1-11 通过hibernate API访问编写第一个小例子
hibernate 业务流程 1 创建配置对象 Configuration config = new Configuration().configure(); 2 创建服务注册对象 Service ...
- Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...
- Vue.js的小例子--随便写的
1.领导安排明天给同事们科普下vue 2.简单写了两个小例子 3.话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta ...
- java即时通信小例子
学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...
- Runtime的几个小例子（含Demo）
一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.) 1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数); [runti ...
- 五个小例子教你搞懂 JavaScript 作用域问题
众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...
随机推荐
- [转]简单科普私钥、地址、助记词、Keystore的区别
本文转自:https://www.jianshu.com/p/d0a4a44685d3 很多人保管不好自己的虚拟财产,发生丢币的情况,很多都是因为不清楚私钥的概念. 私钥(Private Key) 比 ...
- 类型，对象，线程栈，托管堆在运行时的关系，以及clr如何调用静态方法，实例方法，和虚方法（第二次修改）
1.线程栈 window的一个进程加载clr.该进程可能含有多个线程,线程创建的时候会分配1MB的栈空间. 如图: void Method() { string name="zhangsan ...
- Spring Bean的生命周期相关博客
最近得面试题一直 问 Spring 得生命周期,鉴于自己还未阅读过源码 所以只能是自己 背一波了.属实不懂硬背得作用,但是无奈被各位面试官打败了.等以后有时间了 一定要阅读几遍spring的 源码 有 ...
- Mysql中的外键分析(什么是外键,为什么要用外键,添加外键，主外键关联删除)
有一个东西一直在我脑海中是个很烦的东西,但是这东西不搞清楚会阻碍自己的前进.自己做项目demo永远只能用一张表... 所以今天还是学习了下外键希望能够搞明白一些... 百度上搜索外键的作用" ...
- 元素的属性：client系列，scroll系列，offset系
元素的属性 div.attributes 是所有标签属性构成的数组集合 dir.classList 是所有class名构成的数组集合 在classList的原型链上看一看到从 add()和remove ...
- java动态获取WebService的两种方式（复杂参数类型)
java动态获取WebService的两种方式(复杂参数类型) 第一种: @Override public OrderSearchListRes searchOrderList(Order_Fligh ...
- Python3 系列之 环境包管理神器 pipenv
环境说明:Windows 10 build 17763 + Python 3.7.2 介绍 pipenv 是在 pip 与 virtualenv 基础上发展而来的,弥补了之前 virtualenv 通 ...
- 亲测：LNMP环境下，解决项目缓冲慢、502以及配置https的问题
在做的项目在nginx下访问缓冲时间过长,明显比apache下访问蛮11倍有余, 解决办法: 1增加nginx的upstream,其中upstream中为php-cgi的地址: 2利用nginx作为反 ...
- bootstrap timepicker 在angular中取值赋值 并转化为时间戳
上一篇我们讲到angular对于timepicker的一个封装后的插件angular-bootstrap-timepicker,但是由于angular的版本必须是v1.2.30以上的.对于有些涉及到多 ...
- 小tips：JS操作数组的slice()与splice()方法
slice(start, end) slice()方法返回从参数指定位置开始到当前数组末尾的所有项.如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项. var colors = ...