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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
js常用函数 不错
Sep 08 Javascript
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
js 蒙版进度条(结合图片)
Mar 10 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
重置Redux的状态数据的方法实现
Nov 18 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
基于mysql的论坛(4)
2006/10/09 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
详解ES6 系列之异步处理实战
2018/10/26 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
幼儿园家长寄语
2014/04/02 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Django基础CBV装饰器和中间件
2022/03/22 Python