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+CSS实现一个气泡提示框
Aug 18 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
js实现无缝轮播图效果
Mar 09 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php中文验证码实现方法
2015/06/18 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
python计算auc指标实例
2017/07/13 Python
python实现单向链表详解
2018/02/08 Python
Python编写一个优美的下载器
2018/04/15 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
草船借箭教学反思
2014/02/03 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
好员工观后感
2015/06/17 职场文书
table不让td文字溢出操作方法
2022/12/24 HTML / CSS