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函数模拟显示桌面.scf程序示例
Apr 20 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
js格式化时间的方法
Dec 18 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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中的Memcache详解
2014/04/05 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
Javascript this指针
2009/07/30 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
pyqt5实现登录界面的模板
2020/05/30 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
西部世纪面试题
2014/12/05 面试题
美术教师自我鉴定
2014/02/12 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
党校学习个人总结
2015/02/15 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
MySQL常见优化方案汇总
2022/01/18 MySQL
linux目录管理方法介绍
2022/06/01 Servers