文章地址：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. pip list报错：DEPRECATION: The default format will switch to columns in the future.

    一.现象: pip list 显示出以下错误:     DEPRECATION: The default format will switch to columns in the future. Yo ...

  2. Django项目：CRM(客户关系管理系统)--01--01PerfectCRM基本配置ADMIN01

    一.CRM项目需求 二．CRM项目新建 PerfectCRM crm

  3. Minimal coverage (贪心，最小覆盖)

    题目大意:先确定一个M, 然后输入多组线段的左端和右端的端点坐标,然后让你求出来在所给的线段中能够 把[0, M] 区域完全覆盖完的最少需要的线段数,并输出这些线段的左右端点坐标. 思路分析: 线段区 ...

  4. React项目动态设置title标题

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢?1.在定义路由时增 ...

  5. NSURLSessionDownloadTask的深度断点续传

    http://www.cocoachina.com/ios/20160503/16053.html 本文为投稿文章,作者:WeiTChen 对于后台下载与断点续传相信大家肯定不会陌生,那么如果要同时实 ...

  6. UWP获取任意网页加载完成后的HTML

    主要思想:通过后台WebView载入指定网页,再提取出WebView中的内容 关键代码: var html = await webView.InvokeScriptAsync("eval&q ...

  7. date、cal和clear命令

    一.date命令 date命令的功能:date命令是显示或设置系统时间与日期. 很多shell脚本里面需要打印不同格式的时间或日期,以及要根据时间和日期执行操作.延时通常用于脚本执行过程中提供一段等待 ...

  8. python 正则表达式语法

  9. [转]embedding technic:从SNE到t-SNE再到LargeVis

    http://bindog.github.io/blog/2016/06/04/from-sne-to-tsne-to-largevis/#top

  10. Java面向对象----继承概念,super关键字

    继承概念: 继承需要符合的关系  is-a  , 父类通用更抽象,子类更特殊更具体 类之间的关系 继承体现 组合体现 实现接口体现 继承的意义 代码重用 体现不同抽象层次 extends关键字 Sup ...