文章地址：https://www.cnblogs.com/sandraryan/

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>

在输入框输入内容点击按钮，会把内容渲染到页面。同时会增加数组的元素

vue4——把输入框的内容添加到页面（简单留言板）的更多相关文章

  1. [课程设计]Scrum 3.6 多鱼点餐系统开发进度（用户测试反馈页面构思&留言板设计）

    Scrum 3.6 多鱼点餐系统开发进度(用户测试反馈页面构思&留言板设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...

  2. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  3. [课程设计]Scrum 1.7 多鱼点餐系统开发进度（点餐菜式内容添加及美化）

    [课程设计]Scrum 1.7 多鱼点餐系统开发进度(点餐菜式内容添加及美化) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题 ...

  4. ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能

    参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...

  5. ecshop 添加后台页面以及设置权限

    转自 http://blog.csdn.net/tgh1981/article/details/10394059 ecshop 添加新页面 给ecshop后台增加管理功能页面 比如我们增加一个统计报表 ...

  6. Ruby Rails学习中：有点内容的静态页面

    续上篇: 一. 有点内容的静态页面 rails new 命令创建了一个布局文件, 不过现在最好不用.我们重命名这个文件: $ mv app/views/layouts/application.html ...

  7. 3、IOS开发--iPad之仿制QQ空间 （为HomeViewController添加交互逻辑 并 为导航条内容添加UISegmentedControl）

    1. 为bottomMenu添加点击效果 思路描述:        需求:        点击BottomButton的三个item,然后对应响应的是HomeViewController弹出对应的业务 ...

  8. 判断数据库内容，在页面显示自定义数据case when

    判断数据库内容,在页面显示自定义数据 case when...then ...else...end 比如:数据库内容是这样: 通过sql语句判断,数据库的name字段,内容是月桂的,显示嫦娥,其他的显 ...

  9. vs2010根据字符串内容添加断点

    在vs中我们可以直接用表达式.数值型比较直接用操作符即可. 如i==2,i<2; 但是字符型比较呢? 加入我们有一个名为string的变量,定义如下: char *string="Tw ...

随机推荐

  1. 洛谷P1877 [HAOI2012]音量调节 [2017年4月计划 动态规划05]

    P1877 [HAOI2012]音量调节 题目描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都需要改变一次音量.在演出开始之前,他已经做好一个列表,里面 ...

  2. cf round 482D Kuro and GCD and XOR and SUM

    题意: 开始有个空集合,现在有两种操作: $(1,x)$:给集合加一个数$x$,$x \leq 10^5$; $(2,x,k,s)$:在集合中找一个$a$,满足$a \leq s-x$,而且$k|gc ...

  3. 词袋和 TF-IDF 模型

    做文本分类等问题的时,需要从大量语料中提取特征,并将这些文本特征变换为数值特征.常用的有词袋模型和TF-IDF 模型 1.词袋模型 词袋模型是最原始的一类特征集,忽略掉了文本的语法和语序,用一组无序的 ...

  4. Hdu 4251 区间中位数（划分树）

    题目链接 The Famous ICPC Team Again Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 32768/3276 ...

  5. Dubbo+JStorm

    Dubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿里巴巴集团的各成员站点.阿里巴巴近几年对开源社区的贡献不论在国内还是国外都是引人注目的,比如:JStorm捐赠给Apache并加入Apach ...

  6. json格式示例

    案例一: {key:value,key:value} class Person{ String firstname = "张"; String lastname = "三 ...

  7. 创建一个User类

    1.用户模型—User类 用户模型或者叫账户模型,为什么这么说看下面代码 using System; using System.ComponentModel.DataAnnotations; name ...

  8. pytest fixture中scope试验，包含function、module、class、session、package

    上图是试验的目录结构 conftest.py:存放pytest fixture的文件 import uuid import pytest @pytest.fixture(scope="mod ...

  9. 在 VirtualBox 安装 Centos Docker-CE

    在 VirtualBox 安装 Centos Docker-CE 因为需要测试环境,安装了一个 CentosOS 7. 安装结束后发现没有 IP,开始以为是因为 NAT 设置问题. 把网络设置为桥联, ...

  10. oracle函数 TO_CHAR(x[[,c2],C3])

    [功能]将日期或数据转换为char数据类型 [参数] x是一个date或number数据类型. c2为格式参数 c3为NLS设置参数 如果x为日期nlsparm=NLS_DATE_LANGUAGE 控 ...