vue把输入框的内容添加到页面的实例讲解

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把输入框的内容添加到页面的实例内容，感谢大家的学习和对我们的支持。

赞 (0)

相关推荐

  • vue限制输入框只能输入8位整数和2位小数的代码

    看到这个标题好像很简单,onblur.onchange事件都能做到,但是用户体验感貌似很差.查了下百度查不到资料了.看了下vue的基础,发现 vue 有个 watch 监听器好吧,从这里入手 用v-model 加watch 就可以很简单的实现这一个功能. ----代码省略 <input id="amt" type="number" v-model="amount"/> ----代码省略 data:{ return{ amount:&q

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • vue实现页面内容禁止选中功能,仅输入框和文本域可选

    上网上翻了翻,共找到两种方式 CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-se

  • vue遍历生成的输入框 绑定及修改值示例

    对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作.这种操作的难点在于生成数量的不确定,不能在在组件中的data直接定义. 思路 获取生成的输入框数量 初始化数组,数组的长度与待绑定输入框数量一致 将每一个输入框的v-model与数组特定项进行绑定 实现代码 1.data中定义一个存放model值的空数组 data() { return { inputData :[] } } 2.将获取到的数组遍历,将获取到的值插入空数组 res.data.rows.map(v.

  • VUE.js实现动态设置输入框disabled属性

    需求背景 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue. 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读". 代码样例 <el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

  • vue把输入框的内容添加到页面的实例讲解

    vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • vuejs 动态添加input框的实例讲解

    实例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="front" val

  • vue进行图片的预加载watch用法实例讲解

    watch应用场景 我想信图片预加载大家肯定都有接触过,当图片量大的时候,为了保证页面图片都加载出来的时候,我们才把主页面给显示出来,再进行一些ajax请求,或者逻辑操作 那此时你用computed对这种监听一个数据然后进行一系列逻辑操作和ajax请求,那watch再适合不过了,如果用computed的话那你连实现都实现不了,只有用watch监听 <template> <div v-show=show> <img src="https://img.alicdn.co

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • vue 纯js监听滚动条到底部的实例讲解

    在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(

  • 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    先看一下效果图: index.wxml <view class='{{tabIsTop ? "fixedTop" : ""}}'> <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange"> <i-tab key="tab1" title="车主圈"

  • 使用jQuery内容过滤选择器选择元素实例讲解

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.

  • C#网站生成静态页面的实例讲解

    在一些需要经常更新页面数据的网站中,一般访问量不是很大的都直接发布的是带后台代码,每次访问都是有数据库交互的.但是一旦访问量增加了,那么这些服务器开销变成本就要考虑进来了,像一些文章,后台编辑后,文章内容存入数据库,如果1000人访问,如果还是每次取数据库,那这1000次的io访问就显得比较大了,一个好的方法就是,文章确定之后,做成静态页面,而这个做的方法由程序来做,就是递归遍历整个网站,将网站内容都访问一遍,然后生成这些页面的静态文本页面,在将这些页面发布,这样对浏览者而言,他看到的还是同一个

  • vue如何添加数组页面及时显示

    vue如何添加数组页面及时显示

    目录 如何添加数组页面及时显示 给对象中添加数组 如何添加数组页面及时显示 最近在做vue相关的项目,在过程中,遇到了很多问题,有的解决了,有的还没解决,其中一个比较好的问题是,一个评论回复功能,点击回复,可以把内容获取到并且加入数组中,但页面不会及时显示. 经过很多百度摸索,终于解决了. 让我们一起来看看吧. //newwrite是定义的一个数组 //push进去用户名和输入的内容,changeitems //changeitems是我监听的输入框的内容  //<textarea id="

  • vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

    html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

随机推荐