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工具 Event封装
Aug 21 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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
简单采集了yahoo的一些数据
2007/02/14 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python如何在循环引用中管理内存
2018/03/20 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
大二学期个人自我评价
2014/01/13 职场文书
保安岗位职责
2014/02/21 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
javascript实现计算器功能详解流程
2021/11/01 Javascript