vue把输入框的内容添加到页面的实例讲解


Posted in Javascript onNovember 11, 2019

vue最最最简单的demo(记得引入)

实例化一个vue,绑定#app的元素,要渲染的数组arr作为data。

把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <p>click to add input's content</p>
  <input id="inp" type="text">
  <button id="btn">add</button>
  <div v-for = 'item in arr'>{{item}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.0.1/vue.js"></script>
<script>
  const test = new Vue({
    el :'#app',
    data : {
      arr : ['first','second','third','forth']
    }
  });
  console.log(test.arr);
  btn.onclick = function(){
   test.arr.push(inp.value);
  };
</script>
</body>
</html>

vue把输入框的内容添加到页面的实例讲解

 

在输入框输入内容点击按钮,会把内容渲染到页面。同时会增加数组的元素

 vue把输入框的内容添加到页面的实例讲解

以上就是本次介绍的关于vue把输入框的内容添加到页面的实例内容,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
vue与django集成打包的实现方法
Nov 11 #Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 #Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 #Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 #jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 #jQuery
jquery ajax 请求小技巧实例分析
Nov 11 #jQuery
javascript 对象 与 prototype 原型用法实例分析
Nov 11 #Javascript
You might like
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
JS重要知识点小结
2011/11/06 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python的多重继承的理解
2017/08/06 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
如何查找网页漏洞
2016/06/22 面试题
学期自我鉴定范文
2013/10/01 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
如何写好活动总结
2019/06/21 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
Java并发编程必备之Future机制
2021/06/30 Java/Android