<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue中的变异方法：splice()方法</title>

    <script type="text/javascript" src="vue.js"></script>

</head>

<body>

<div id="demo">

    <li v-for="(v,k) in comments">

        {{v.content}}

        <button v-on:click="remove(k)">删除</button>

    </li>

    <textarea rows="10" cols="20" v-model="current"></textarea><br/>

    <button v-on:click="push('first')">在数据前面增加</button>

    <button v-on:click="push('last')">在数据后面增加</button>

    <br>

    <button v-on:click="del('first')">删除第一个数据</button>

    <button v-on:click="del('last')">删除最后一个数据</button>

</div>

<script type="text/javascript">

new Vue({

    el:"#demo",

    data:{

        current:"",

        comments:[

            {content:'PHP'},

            {content:'JAVA'}

        ]

    },

    methods:{

        //增加数据的方法：

        push(type){

            var content={content:this.current};

            switch (type){

                case 'first':

                    this.comments.unshift(content);

                    break;

                case 'last':

                    this.comments.push(content);

                    break;

            }

            this.current="";

        },

        //删除数据的方法：

        del(type){

            switch (type){

                case 'first':

                    this.comments.shift();

                    break;

                case 'last':

                    this.comments.pop();

                    break;

            }

        },

        //点击删除，删除对应的数据信息：

        remove(k){

            this.comments.splice(k,1);

        }

    }

});

</script>

</body>

</html>

　　

022——VUE中remove()方法的使用：的更多相关文章

  1. 使用List中remove方法时需要注意的问题

    String str1 = new String("1"); String str2 = new String("2"); String str3 = new ...

  2. 从 Vue 中 parseHTML 方法来看前端 html 词法分析

    先前我们在 从 Vue parseHTML 所用正则来学习常用正则语法 这篇文章中分析了 parseHTML 方法用到的正则表达式,在这个基础上我们可以继续分析 parseHTML 方法. 先来看该方 ...

  3. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

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

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

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

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

  6. Ace 在Vue中使用方法

    var Vue = require('vue/dist/vue.common.js'); document.querySelector('body').append(document.createEl ...

  7. vue中makeMap方法的使用 (定义注册一些值 后期方便使用)

    function makeMap ( str, expectsLowerCase ) { var map = Object.create(null); var list = str.split(',' ...

  8. Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...

  9. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

随机推荐

  1. iOS 所有设备一览 && CoreFoundation源码

    1. 所有设备一览 https://en.wikipedia.org/wiki/List_of_iOS_devices 2. CoreFoundation源码(可以看看runloop.runtime的 ...

  2. PHP中的错误信息

    PHP中的错误信息   php.ini中配置错误消息 在PHP4中,没有异常 Exception这个概念,只有 错误Error.我们可以通过修改php.ini 文件来配置用户端输出的错误信息. 在ph ...

  3. Django学习笔记之Cookie、Session和自定义分页

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  4. 老话题之C#写邮件发送

    唉!近来特么QQ邮件也犯二,突然间以前写的代码邮件发不出去,各种报错,无奈之下,换成了@163.com,可是报错依然,该开通(POP3/SMTP/IMAP)的都开通了!我勒了个草,像是在玩哥一样,还好 ...

  5. C++之STL迭代器（iterator）

    [摘要]本文是对STL--迭代器(iterator)的讲解,对学习C++编程技术有所帮助,与大家分享. 原文:http://www.cnblogs.com/qunews/p/3761405.html ...

  6. 4.9版本的linux内核中实时时钟芯片pt7c4338的驱动源码在哪里

    答:drivers/rtc/rtc-ds1307.c,内核配置项为CONFIG_RTC_DRV_DS1307 Location: -> Device Drivers -> Real Tim ...

  7. [BZOJ2809]dispatching

    Description 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 Master.除了 Master以外,每名忍者都有且仅有一个上级. ...

  8. maven项目引入本地包，不使用中央仓库

    1. dependendy引入 <dependency> <groupId>com.taobao</groupId> <artifactId>taoba ...

  9. 爬虫框架Scrapy之CrawlSpiders

    CrawlSpiders 通过下面的命令可以快速创建 CrawlSpider模板 的代码: scrapy genspider -t crawl tencent tencent.com 上一个案例中,我 ...

  10. 【目标检测】Cascade R-CNN 论文解析

    目录 0. 论文链接 1. 概述 2. 网络结构的合理性 3. 网络结构 4. 参考链接 @ 0. 论文链接 Cascade R-CNN 1. 概述   这是CVPR 2018的一篇文章,这篇文章也为 ...