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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
webpack 最佳配置指北(推荐)
Jan 07 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
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php利用header函数下载各种文件
2016/08/24 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
php实用代码片段整理
2016/11/12 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
详细解读Python中的__init__()方法
2015/05/02 Python
python中hashlib模块用法示例
2017/10/30 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
社区学习十八大感想
2014/01/22 职场文书
知识竞赛活动方案
2014/02/18 职场文书
环境建设实施方案
2014/03/14 职场文书
预备党员公开承诺书
2014/05/28 职场文书
银行进社区活动总结
2014/07/07 职场文书
宣传稿格式范文
2015/07/23 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers