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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
JavaScript两种计时器的实例讲解
Jan 31 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
新浪新闻小偷
2006/10/09 PHP
php生成随机密码的几种方法
2011/01/17 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
VUE实现强制渲染,强制更新
2019/10/29 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python3中exp()函数用法分析
2019/02/19 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python按钮的响应事件详解
2019/03/04 Python
Python Pandas 箱线图的实现
2019/07/23 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
承诺保证书格式
2015/02/28 职场文书
老公婚前保证书
2015/02/28 职场文书
一年级下册数学教学反思
2016/02/16 职场文书