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键盘
May 02 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
js面试题之异步问题的深入理解
Sep 20 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
使用无限生命期Session的方法
2006/10/09 PHP
php绘制圆形的方法
2015/01/24 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
日语专业毕业生自荐信
2013/11/11 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
婚礼司仪主持词
2014/03/14 职场文书
公共场所标语
2014/06/30 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2016年少先队活动总结
2016/04/06 职场文书
python实现监听键盘
2021/04/26 Python