<!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. 51Nod 1079

    题目大意: 一个正整数K,给出K Mod一些质数的结果,求符合条件的最小的K.例如,K%2=1,K%3=2,K%5=3符合条件的最小的K=23. Input 第1行:1个数N表示后面输入的质数及模的数 ...

  2. hdu3518 Boring counting

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=3518 题目: Boring counting Time Limit: 2000/1000 MS ...

  3. Gym - 100548H The Problem to Make You Happy 2014-2015 ACM-ICPC, Asia Xian Regional Contest (BFS+博弈)

    题意:Bob和Alice在一张有向无环图上移动,给定二者的起点,Bob先手.Bob的失败条件是不能移动或者与Alice相遇.两个人都采取最优策略,求Bob是否会赢 分析:银牌题.先确定所有的失败状态, ...

  4. [转]Raanan Fattal - Image and Video Upscaling from Local Self-Examples 图像放大

    转自:http://www.sigvc.org/bbs/thread-1032-1-1.html 论文链接:http://www.cs.huji.ac.il/~raananf/projects/lss ...

  5. Spring AOP统一异常处理

    1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  6. win32api win32gui win32con 窗口句柄 发送消息 常用方法

    Pywin32是一个Python库,为python提供访问Windows API的扩展,提供了齐全的windows常量.接口.线程以及COM机制等等. 1.通过类名和标题查找窗口句柄,并获得窗口位置和 ...

  7. Java硬件同步机制Swap指令模拟+记录型信号量模拟

    学校实验存档//.. 以经典的生产者消费者问题作为背景. 进程同步方式接口: package method; /** * P表示通过,V表示释放 */ public interface Method ...

  8. Django学习笔记之Django ORM Aggregation聚合详解

    在当今根据需求而不断调整而成的应用程序中,通常不仅需要能依常规的字段,如字母顺序或创建日期,来对项目进行排序,还需要按其他某种动态数据对项目进行排序.Djngo聚合就能满足这些要求. 以下面的Mode ...

  9. web.xml<context-param>与<init-param>的作用与区别

    <context-param>的作用:web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件we ...

  10. awk循环语句-【AWK学习之旅】

      AWK中两种循环语句:if-else 和 while   控制流语句: 1.if-else 求总数,平均值: [root@monitor awkdir]# awk '$3>6 {n = n ...