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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
JavaScript中的类型检查
Feb 03 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
Vue解决echart在element的tab切换时显示不正确问题
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
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python操作redis数据库的三种方法
2020/09/10 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
护士的岗位职责
2013/12/04 职场文书
新领导上任欢迎词
2014/01/13 职场文书
出国留学导师推荐信
2015/03/26 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
JS实现数组去重的11种方法总结
2022/04/04 Javascript
win10搭建配置ftp服务器的方法
2022/08/05 Servers