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 相关文章推荐
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
Js中sort()方法的用法
2006/11/04 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
值得收藏的10道python 面试题
2019/04/15 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
Python eval函数介绍及用法
2020/11/09 Python
Python绘制数码晶体管日期
2021/02/19 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
厂区绿化方案
2014/05/08 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
cypress测试本地web应用
2022/06/01 Javascript