<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <title id="title">{{title}}</title>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <ul>

        <li v-for="v in list">

            {{v.content}}

        </li>

    </ul>

    <textarea v-model="content" cols="30" rows="10"></textarea>

    <button v-on:click="push">发表</button>

</div>

<script>

    var vue = function (options){new Vue(options)};

    vue({

        el:'#title',

        data:{

            title:'Vue 变异方法Push的留言板实例'

        }

    });

    var app = vue({

        el:'#ask',

        data:{

            content:'',

            list:[

                {'content':'hello'},

                {'content':'简单记录'}

            ]

        },

        methods:{

            push(){

                var content_push = {'content':this.content};

                this.list.push(content_push);

                this.content='';

            }

        }

    });

</script>

</body>

</html>

Vue 变异方法Push的留言板实例的更多相关文章

  1. 020——VUE中变异方法push的留言版实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 20.VUE学习之-变异方法push的留言版实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue 变异方法filter和正则RegExp对评论进行搜索

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue 变异方法sort&reverse对评论进行排序

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue 变异方法unshift&pop&shift

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 021——VUE中变异方法 push/unshift pop/shift

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 21.VUE学习之-操作data里的数组变异方法push&unshit&pop&shift的实例应用讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue变异方法

    push()  往数组最后面添加一个元素,成功返回当前数组的长度    pop()  删除数组的最后一个元素,成功返回删除元素的值    shift()  删除数组的第一个元素,成功返回删除元素的值u ...

随机推荐

  1. matlab练习程序（图像投影到点云）

    最近接触点云比较多,如果把图像投影到点云应该挺有意思. 首先需要载入图像,然后做个球或其他什么形状的点云,这里可以参考球坐标公式. 最后通过pcshow将像素输出到点云上即可. 原图: 投影后的点云: ...

  2. react组件通信方式汇总

    父组件更新组件状态,通过props传递给子组件,子组件得到后进行更新.Timer 是倒计时子组件,集成在了OrderPay父组件里,父组件向子组件传订单数据参数order对象.如下代码: <Ti ...

  3. 正则表达式中的.*?和python中re.S参数的详解

    本章的内容主要是为讲解在正则表达式中常用的.*?和re.S! 在正则表达式中有贪婪匹配和最小匹配:如下为贪婪匹配(.*) import re match = re.search(r'PY.*', 'P ...

  4. elementui中的el-table中拼接两个列表字段

    我们知道,在ElementUI中我们是使用下面的语法来展示列表字段的: <el-table :data="yanggbs" stripe style="width: ...

  5. go语言使用go-sciter创建桌面应用(八) 窗口显示时，自动加载后端数据。

    有些时候我们需要在窗口创建并显示时,加载一些后端的配置,这就需要用到view提供的几个事件. https://sciter.com/docs/content/sciter/View.htm state ...

  6. python将oracle数据库保存到excel

    上代码: import pandas as pd import SqlHelper.ORACLE as ORA if __name__ == '__main__': #连接数据库 ms = ORA.O ...

  7. python 安装impala包

    一路安装就可以 .pip install six .pip install bit_array .pip install thriftpy .pip install thrift_sasl .pip ...

  8. 在python中实现随机选择

    想从一个序列中随机抽取若干元素,或者想生成几个随机数. random 模块有大量的函数用来产生随机数和随机选择元素.比如,要想从一个序列中随机的抽取一个元素,可以使用random.choice() : ...

  9. C#中在定义事件委托时怎样跨窗体传递参数

    场景 C#中委托与事件的使用-以Winform中跨窗体传值为例: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100150700 ...

  10. FCC---Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限，让小球一直跳动

    The previous challenges covered how to use some of the animation properties and the @keyframes rule. ...