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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
List Installed Software Features
2007/06/11 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
py中的目录与文件判别代码
2008/07/16 Python
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python入门教程之if语句的用法
2015/05/14 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python实发邮件实例详解
2019/11/11 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python 回溯法模板详解
2020/02/26 Python
虚拟机下载python是否需要联网
2020/07/27 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
生物科学系大学生的自我评价
2013/12/20 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
爱情保证书范文
2014/02/01 职场文书
青年文明号复核材料
2014/02/11 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
php 原生分页
2021/04/01 PHP
MySQL 数据丢失排查案例
2021/05/08 MySQL
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
python turtle绘图命令及案例
2021/11/23 Python