文章地址：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. 【react】react-reading-track

    这是一个很有趣的图书阅读demo 先放github地址:https://github.com/onlyhom/react-reading-track 我觉得这个博主的项目很有意思呢 我们一起看看代码啊 ...

  2. _STORAGE_WRITE_ERROR_:./Application/Runtime/Cache/Home/f8995a0e1afcdadc637612fae5a3b585.php

    将one think部署到服务器上出现下面的问题 _STORAGE_WRITE_ERROR_:./Application/Runtime/Cache/Home/f8995a0e1afcdadc6376 ...

  3. 对List<Map<String, Object>>集合排序

    private void mySort(List<Map<String, Object>> list) { //list为待排序的集合,按SEQ字段排序 Comparator& ...

  4. 外贸电子商务网站之Prestashop修改顶部导航

    如修改以上所示顶部导航. 如何在prestashop顶部导航栏添加链接,Module>Top horizontal menu点击进入Configure页面 1,在Settings 中看到 链接 ...

  5. solr dataimport中遇到的问题

    1.windows的tomcat是没有catalina.out的,可以通过修改start.bat和catalina.bat的方式让日志输出到catalina.out 2.按照网上搜到的资料配置好sol ...

  6. 【JZOJ3885】【长郡NOIP2014模拟10.22】搞笑的代码

    ok 在OI界存在着一位传奇选手--QQ,他总是以风格迥异的搞笑代码受世人围观 某次某道题目的输入是一个排列,他使用了以下伪代码来生成数据 while 序列长度<n do { 随机生成一个整数属 ...

  7. git day01笔记 常用操作命令 快照 推送 拉取

    ansible 批量在远程主机上执行命令或者脚本 git   做版本控制的一个工具 ## git操作命令: 工作区:当前编辑的区域 缓存区:add 之后的区域 本地仓库:commit之后的区域 远程仓 ...

  8. 大数据技术之Hadoop（HDFS）

    第1章 HDFS概述 1.1 HDFS产出背景及定义 1.2 HDFS优缺点 1.3 HDFS组成架构 1.4 HDFS文件块大小(面试重点) 第2章 HDFS的Shell操作(开发重点) 1．基本语 ...

  9. Spring → 01：概述

    一.了解Spring发展 Spring是一个开源框架,Spring是于2003年兴起的一个轻量级的Java开发框架,由Rod Johnson在其著作Expert One-On-One J2EE Dev ...

  10. iOS 9 学习系列：UIStack View

    http://www.cocoachina.com/ios/20150921/13492.html 在 iOS9 中,Apple 引入了 UIStackView,他让你的应用可以通过简单的方式,纵向或 ...