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使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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
php之可变变量的实例详解
2017/09/12 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
JS实现简易计算器
2020/02/14 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Python实现CET查分的方法
2015/03/10 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python制作词云图代码实例
2019/09/09 Python
python获取引用对象的个数方式
2019/12/20 Python
Python中url标签使用知识点总结
2020/01/16 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
监督检查工作方案
2014/05/28 职场文书
国际贸易求职信
2014/07/05 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
python turtle绘图
2022/05/04 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS