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 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...
随机推荐
- Python模块之time、datetime
python内置模块系列(一):time模块与datetime time模块是python内置查看当前时间戳的一个模块 一 time 1 获得时间戳 时间戳:通常来说,时间戳表示的是从1970年1月1 ...
- mysqldump备份（Windows）
先说下思路,每天凌晨1点备份线上云服务器上的MySQL数据库,将备份的sql文件拷贝下来. 第一步:通过搜索引擎搜索相关可借鉴的文章.搜索关键字"Windows MySQL 备份" ...
- 适用于WebApi的SQL注入过滤器
开发工具:Visual Studio 2017 C#版本:C#7.1 最有效的防止SQL注入的方式是调用数据库时使用参数化查询. 但是如果是接手一个旧的WebApi项目,不想改繁多的数据库访问层的代码 ...
- CentOS 7.6安装桌面
# yum -y groups install "GNOME Desktop" # startx
- devDependencies与dependencies （转载）
简单整理: 一.关键词解释 devDependencies用于本地环境开发 dependencies用户发布环境 devDependencies是只会在开发环境下依赖的模块,生产环境不会被打入包内.通 ...
- [angularjs] angularjs系列笔记（六）http
读取服务器json数据,get方式 <body> <div ng-app="Home"> <div ng-controller="httpT ...
- [angularjs] angularjs系列笔记（一）简介
Angularjs通过新的属性和表达式扩展了html Andularjs 可以构建一个单一页面的应用程序(SPAS SinglePageApplications) Angularjs通过指令扩展了ht ...
- python基础学习（一） 第一个python程序
1. 使用python/python3解释器的方式 按照惯例,我们都是以Hello world作为一门程序语言的开始,进行如下的操作: 在桌面上新建一个hello-python文件夹 进入hello- ...
- mediainfo使用
1.linux安装mediainfo yum install mediainfo(epel源安装) 2.输出文件信息到xml文件 mediainfo --OUTPUT=XML -f ftp ...
- EF中更新操作 ID自增但不是主键 ；根据ViewModel更新实体的部分属性
//ID自增但不是主键的情况 public int Update_join<TEntity>(TEntity entity) where TEntity : class { dbconte ...