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 相关文章推荐
正则表达式语法
Oct 09 Javascript
JS模拟多线程
Feb 07 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
Python中的探索性数据分析(功能式)
2017/12/22 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
初中语文教学研修日志
2015/11/13 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python