<!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. 房屋布局分析《Physics Inspired Optimization on Semantic Transfer Features: An Alternative Method for Room Layout Estimation》

    视觉算法在智能审核系统上的演进与实践 刘天悦 贝壳找房 / 资深工程师 https://static001.geekbang.org/con/56/pdf/1088777747/file/%E8%A7 ...

  2. linux shell攻略学习笔记二

    1.Cat命令 这么多命令,常用的 Cat –n file  显示文件以及行数 Cat - echo 'Text through stdin' | cat - file.txt Text throug ...

  3. 【CodeForces】CodeForcesRound594 Div1 解题报告

    点此进入比赛 \(A\):Ivan the Fool and the Probability Theory(点此看题面) 大致题意: 给一个\(n\times m\)的矩阵\(01\)染色,使得不存在 ...

  4. 可迭代对象(__iter__()和__next__())

    如果一个类想被用于for ... in循环,类似list或tuple那样,就必须实现一个__iter__()和__next__()方法,该方法返回一个迭代对象 然后,Python的for循环就会不断调 ...

  5. Java反射方法总结

    1.得到构造器的方法 Constructor getConstructor(Class[] params) -- 获得使用特殊的参数类型的公共构造函数, Constructor[] getConstr ...

  6. pytest框架与unittest框架的对比

    一.pytest的优势 pytest是基于unittest之上的单元测试框架,它的优势如下: 自动发现测试模块和测试方法 断言使用 assert + 表达式 可以设置测试会话级(session).模块 ...

  7. Linux常用命令之网络命令

    write命令 write命令用于向指定登录用户终端上发送信息.通过write命令可传递信息给另一位登入系统的用户,当输入完毕后,键入EOF表示信息结束,write命令就会将信息传给对方.如果接收信息 ...

  8. GO Map的初步使用

    一.集合(Map) 1.1 什么是Map 张三:13910101201 李四:13801010134 map是Go中的内置类型,它将一个值与一个键关联起来.可以使用相应的键检索值. Map 是一种无序 ...

  9. go-面向对象编程（下）

    面向对象编程思想-抽象 抽象的介绍 我们在前面去定义一个结构体时候,实际上就是把一类事物的共有的 属性( 字段)和 行为( 方法)提取 出来,形成一个 物理模型(结构体).这种研究问题的方法称为抽象 ...

  10. 深入理解AbstractQueuedSynchronizer(AQS)

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...