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 相关文章推荐
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
canvas实现钟表效果
2017/02/13 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python 将Excel转Word的示例
2021/03/02 Python
京东国际站:JOYBUY
2017/11/23 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
失业者真诚求职信范文
2013/12/25 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
产品生产计划书
2014/05/07 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
行政介绍信范文
2015/05/04 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
党纪处分决定书
2015/06/24 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫