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 相关文章推荐
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
jQuery选择器全面总结
Jan 06 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
vue路由插件之vue-route
Jun 13 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之require/include顺序 推荐
2011/01/02 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
清空上传控件input file的值
2010/07/03 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
原生js实现随机点名
2020/07/05 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python中音频处理库pydub的使用教程
2017/06/07 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
进口业务员岗位职责
2014/04/06 职场文书
品质口号大全
2014/06/17 职场文书
工程承包协议书范本
2014/09/29 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL