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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
解放web程序员的输入验证
Oct 06 Javascript
JavaScript实现禁止后退的方法
Dec 27 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
暖通工程师岗位职责
2014/06/12 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
六年级学生期末评语
2014/12/26 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL