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 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...
随机推荐
- 连接MySQL的10060错误:Can't connect to MySQL server on '*.*.*.*'(10060)
使用MySQL的图形界面管理工具Navicat for MySQL连接Mysql数据库时提示错误:Can't connect to MySQL server (10060) [出现该问题可能的原因:] ...
- centos 安装sbt
1.yum install sbt 2.如果不行,则 curl https://bintray.com/sbt/rpm/rpm > bintray-sbt-rpm.repo sudo mv bi ...
- 不容易系列之一（hdu1465）错排+递推
不容易系列之一 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- MSQL基本增删改语句汇总练习
删除约束注意: 网上说是 ALTER TABLE 表名 DROP CONSTRAINT 约束名; 这里的CONSTRAINT 是指primary key,foreign key,unique,等实际的 ...
- RPC调用与GC垃圾回收
RPC调用 多个服务协同完成一次业务时,由于业务约束(如红包不符合使用条件.账户余额不足等).系统故障(如网络或系统超时或中断.数据库约束不满足等),都可能造成服务处理过程在任何一步无法继续,使数据处 ...
- Docker部署Nginx并修改配置文件
Docker部署Nginx并修改配置文件 一.拉取nginx镜像 docker pull nginx 二.在宿主机中创建挂载目录 mkdir -p /data/nginx/{conf,conf.d,h ...
- 填一个laravel视图缓存没有及时更新的坑
1.此坑背景 laravel在渲染blade模板后,会将渲染好的结果存到storage/framework/views(默认路径,也可在配置中修改的)中,以便下次使用.但我最近总是发现修改了blade ...
- for、for / in循环
1.for循环 循环代码块一定的次数 <!DOCTYPE html> <html lang="en" dir="ltr"> <he ...
- js调用摄像头
详情源码请参见下方的 GitHub !!! <div> <b>调用移动端摄像头</b><br> <label>照相机: <input ...
- django（python manage.py imgrate）同步数据库出错后的解决办法
问题 很多情况下,因为app的models.py的文件内容有误,但是通过python manage.py check检查不出来时,当执行python manage.py migra ...