vue.js 实现输入框动态添加功能


Posted in Javascript onJune 25, 2018

代码如下所示:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-demo</title>
 </head>
 <body>
  <div id="app">
   <p> {{title}}</p>
   <p v-if='showSub'> {{subTitle}}</p>
   <div>
    <input type="text" v-model="mytodo">
    <button @click='handleClick'>添加,修改</button>
   </div>
   <ul>
    <li v-for='todo in todos'>{{todo}}</li>
   </ul>
  </div>
  <!-- built files will be auto injected -->
 </body>
</html>

上面是index.html

用 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素。

简单地说:当在输入框输入“你好”时,在main.js 文件里面的mytodo的值就变成了:'你好‘。

当我点击添加修改按钮的时候,通过事件绑定,执行main.js 文件里面的 handleClick ()方法,

通过:  this.todos.push(this.mytodo);      

todos:[
    '吃饭',
    '睡觉',
    '写代码'
  ]

添加“你好”。

通过

<ul>
    <li v-for='todo in todos'>{{todo}}</li>
   </ul>

渲染出来。

然后又通过this.mytodo = '';

使得输入框变为空。

下面看main.js

new Vue({
 el:"#app",
 data:{
  title:'hello vuejs',
  subTitle:'Vue React Angular is good',
  showSub:true,
  mytodo:'',
  todos:[
    '吃饭',
    '睡觉',
    '写代码'
  ]
 },
 methods:{
  handleClick(){
    // push() 添加方法
     this.todos.push(this.mytodo);
     this.mytodo = '';
     this.title = '您好,小程序';
  }
 }
}
)

运行截图:

vue.js 实现输入框动态添加功能

vue.js 实现输入框动态添加功能

总结

以上所述是小编给大家介绍的vue.js 实现输入框动态添加功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
vue-router重定向不刷新问题的解决
Jun 25 #Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 #Javascript
详解React之父子组件传递和其它一些要点
Jun 25 #Javascript
Vue EventBus自定义组件事件传递
Jun 25 #Javascript
一个Vue页面的内存泄露分析详解
Jun 25 #Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 #Javascript
angularjs结合html5实现拖拽功能
Jun 25 #Javascript
You might like
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
Python计算信息熵实例
2020/06/18 Python
Python如何输出警告信息
2020/07/30 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
小学生家长寄语
2014/04/02 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
个人授权委托书范文
2014/09/21 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
导游词之临安白水涧
2019/11/05 职场文书