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.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
JavaScript对象原型链原理详解
Feb 05 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
PHP7 新增功能
2021/03/09 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python内置函数locals和globals对比
2020/04/28 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
出生公证委托书
2014/04/03 职场文书
毕业生找工作求职信
2014/08/05 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python