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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue基于element的区间选择组件
Sep 07 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 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
西德产收音机
2021/03/01 无线电
PHP安全配置详细说明
2011/09/26 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
Python Queue模块详解
2014/11/30 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
预备党员思想汇报范文
2013/12/29 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
单位租房协议书样本
2014/10/30 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
小学生教师节广播稿
2015/08/19 职场文书
postgresql中如何执行sql文件
2023/05/08 PostgreSQL