<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>变异方法：push/unshift pop/shift</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="hdcms">

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

        {{v.content}}

    </li>

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

    <button v-on:click="push('end')">发表到最后</button>

    <button v-on:click="push('prev')">发表到前面</button>

    <br>

    <button v-on:click="del('pop')">删除最后一条</button>

    <button v-on:click="del('shift')">删除第一条</button>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            //当前用户输入内容：

            current_content: "",

            comments: [

                {content: "后盾人"},

                {content: "老师"}

            ]

        },

        methods: {

            push(type) {

                var content = {content: this.current_content};

                switch (type) {

                    case 'end':

                        this.comments.push(content);

                        break;

                    case 'prev':

                        this.comments.unshift(content);

                        break;

                }

                this.current_content = "";

            },

            del(type) {

                switch (type) {

                    case 'pop':

                        this.comments.pop();

                        break;

                    case 'shift':

                        this.comments.shift();

                        break;

                }

            }

        }

    });

</script>

</body>

</html>

　　

021——VUE中变异方法 push/unshift pop/shift的更多相关文章

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

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

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

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

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

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

  4. Vue 变异方法Push的留言板实例

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

  5. 数组增、删方法（push()-unshift()-pop()和shift()）

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

  6. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

  7. <h2>js数组操作大全（pop,push,unshift,splice,shift方法）</h2>

    ---恢复内容开始--- shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a ...

  8. 022——VUE中remove()方法的使用：

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

  9. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

随机推荐

  1. PKU 1379 Run Away(模拟退火算法)

    题目大意:原题链接 给出指定的区域,以及平面内的点集,求出一个该区域内一个点的坐标到点集中所有点的最小距离最大. 解题思路:一开始想到用随机化算法解决,但是不知道如何实现.最后看了题解才知道原来是要用 ...

  2. centos下删除名称为乱码的文件

    1.通过ls -li 获取要删除乱码文件名文件的inode号,比如得到的是 146506

  3. input 虚拟键盘

    if (!Element.prototype.scrollIntoViewIfNeeded) { Element.prototype.scrollIntoViewIfNeeded = function ...

  4. python-静态方法staticmethod、类方法classmethod、属性方法property

    Python的方法主要有3个,即静态方法(staticmethod),类方法(classmethod)和实例方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 def  ...

  5. WebSocket使用SuperWebSocket结合WindowsService实现实时消息

    SuperWebSocket在WebService中的应用 最开始使用是寄托在IIS中,发布之后测试时半个小时就会断开,所以改为WindowsService 1. 新建Windows服务项目[Test ...

  6. Windows下如何安装python第三方库lxml

    lxml是个非常有用的python库,它可以灵活高效地解析xml,与BeautifulSoup.requests结合,是编写爬虫的标准姿势. 参考 Windows下如何安装python第三方库lxml ...

  7. Leetcode（93）： Restore IP Addresses

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  8. 可扩展多线程异步Socket服务器框架EMTASS 2.0 (转自：http://blog.csdn.net/hulihui)

    可扩展多线程异步Socket服务器框架EMTASS 2.0 (转自:http://blog.csdn.net/hulihui) 0 前言 >>[前言].[第1节].[第2节].[第3节]. ...

  9. JSON 中JsonConfig的使用（转）

    我们通常对一个Json串和Java对象进行互转时,经常会有选择性的过滤掉一些属性值,而json-lib包中的JsonConfig为我们提供了这种 功能,具体实现方法有以下几种.(1)建立JsonCon ...

  10. Material Design学习之 Camera

    转载请注明出处:王亟亟的大牛之路 年后第一篇,自从来了某司产量骤减,这里批评下自己,这一篇的素材来源于老牌Material Design控件写手afollestad的 https://github.c ...