文章地址：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. 获取电脑名和IP地址

    private string  GetHostNameAndIP( bool  isv4Orv6)        {            string HostName = Dns.GetHostN ...

  2. 【每日一linux命令7】用户及用户组

    一.查询用户及用户组相关命令 1.whoami 查询当前登录的用户名 2.groups 查询当前登录用户名所在的用户组 3.groups root 查询root用户名所在的用户组 二.怎么批量查看用户 ...

  3. CSS(前)篇

    1.1CSS重点总结 1.1.1 选择器 1.1.2 盒子模型 1.1.3 浮动 1.1.4定位 1.2CSS介绍 概念: 层叠样式表或者级联样式表(Cascading Style Sheets) 层 ...

  4. Python单元测试浅析

    测试的意义   人们针对一个具体问题,通过分析和设计,最后用编程语言写出了一个程序,如果它通过了语言解释器(编译器)的检查,可以运行了,那么下一步的工作就是设法确认它确实满足了我们需求.这篇文章就是讨 ...

  5. SQL优化系列（一）- 优化SQL

     优化SQL SQL开发人员从源代码中发现一条跑得很慢的SQL, 如何优化? DBA从AWR报告中发现一条跑得很慢的SQL,没有源代码或者不想修改源代码怎么办? SQL自动优化工具SQL Tuning ...

  6. 外贸电子商务网站之Prestashop 设置网站基本信息

    顶部banner图,首页各尺寸banner图.社交分享.物流支持.支付方式提醒等等设置 示例版本:1.6.1.11

  7. OSGi教程：Framework Namespaces Specification

    此教程基于OSGi Core Release 7 OSGi命名空间规范 详细的教程上面的英文教程里面有详细说明. 我就记录一下自己看完之后的简单理解: OSGi的Namespace规范就是规定了你Ma ...

  8. Android开源实战：使用MVP+Retrofit开发一款文字阅读APP

    文字控 使用MVP+Retrofit开发的一款文艺APP,它是一个非常优美的文字阅读应用,界面基本上符合material design设计规范. 在该项目中,我采用的是MVP架构,该架构目前在Andr ...

  9. php-imagick扩展

    介绍 magick 是用 ImageMagic API 来创建和修改图像的PHP官方扩展.ImageMagick® 是用来创建,编辑,合并位图图像的一套组件. 它能够用于读取,转换,写入多种不同格式的 ...

  10. Nginx教程(7) 正向代理与反向代理【总结】 （转）

    1.前言 最近工作中用到反向代理,发现网络代理的玩法还真不少,网络背后有很多需要去学习.而在此之前仅仅使用了过代理软件,曾经为了访问google,使用了代理软件,需要在浏览器中配置代理的地址.我只知道 ...