文章地址：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. 统计Linux下的CPU状态信息

    def cpu(): all_cpus=[] with open('e:/cpu.txt') as f: core={} for line in f.readlines(): ab=line.spli ...

  2. HTML之meta标签缓存控制

    <meta http-equiv="pragram" content="no-cache"> 禁止浏览器从本地缓存中调阅页面. 网页不保存在缓存中, ...

  3. python第一天 ：计算机基础(一)

    1.什么是编程语言 答:人类与计算机交流的介质 2.什么是编程 答:利用编程语言控制计算机解决问题 3.为什么要编程 答:可以控制计算机做事,提高生产生活效率 4.计算机的五大组成部分分别有什么作用? ...

  4. 跟我一起学extjs5(02--建立project项目)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jfok/article/details/35569057 跟我一起学extjs5(02--建立pro ...

  5. <第一周> city中国城市聚类 testdata学生上网聚类 例子

    中国城市聚类 # -*- coding: utf-8 -*- kmeans算法 """ Created on Thu May 18 22:55:45 2017 @auth ...

  6. 【水滴石穿】react-native-ble-demo

    项目的话,是想打开蓝牙,然后连接设备 点击已经连接的设备,我们会看到一些设备 不过我这边在开启蓝牙的时候报错了 先放作者的项目地址: https://github.com/hezhii/react-n ...

  7. 从php到浏览器的缓存机制

    所有的php程序员都知道在php脚本里面执行 echo “1”;访客的浏览器里面就会显示“1”. 但是我们执行下面的代码的时候,并不是显示“1”之后5秒再显示“2”,而是等待5秒后直接显示“12” 这 ...

  8. pytest fixture 利用 params参数实现用例集合

    @pytest.fixture有一个params参数,接受一个列表,列表中每个数据都可以作为用例的输入.也就说有多少数据,就会形成多少用例.如下面例子,就形成3条用例 test_parametrizi ...

  9. ubuntu下C操作Mysql数据库第一步

    学习于: http://armsword.com/2013/06/20/ubuntu-c-mysql.html

  10. UCloud-201809-001:Redis服务未授权访问漏洞安全预警

    UCloud-201809-001:Redis服务未授权访问漏洞安全预警 尊敬的UCloud用户,您好! 发布时间  2018-09-11更新时间  2018-09-11漏洞等级  HighCVE编号 ...