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中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
tsconfig.json配置详解
May 17 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python自带的IDE在哪里
2020/07/01 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
聘用意向书范本
2014/04/01 职场文书
专科生就业求职信
2014/06/22 职场文书
关于安全的广播稿
2014/10/23 职场文书
2014年人事部工作总结
2014/12/03 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
Golang日志包的使用
2022/04/20 Golang