<!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. Git在Githib和Github上的使用

    本文使用的环境是linux里 一.git的常用命令解释: 1.基础命令: git init #创建版本库 git add <file> #将文件修改添加到暂存区 git commit -m ...

  2. selenium+python—实现自动化测试基本思路

    测试是一个贯穿于整个开发过程的连续过程,测试最基本的原理就是比较预期结果是否与实际执行结果相同,如果相同则测试成功,否则测试失败. 为了让单元测试代码能够被测试和维护人员更容易地理解,最好的解决办法是 ...

  3. oracle同一个库上面，不同用户相互赋予权限

    用法: 有两个用户:user1和user2,都是在库TEST上,分别有表user1.table1,user2.table2 但是用user1登录的时候,user2上表就不能用,此时就可以使用grant ...

  4. Java 安装教程(Eclipse) + 汉化 + 简单创建java项目

    Java 安装教程(Eclipse) 要安装Java 要分两个步骤: 1.JDK的安装 2.Eclipse的安装 3.Eclipse汉化 4.Eclipse创建简单java项目 1和2的顺序不能颠倒, ...

  5. MR案例：多文件输出MultipleOutputs

    问题描述:现有 ip-to-hosts.txt 数据文件,文件中每行数据有两个字段:分别是ip地址和该ip地址对应的国家,以'\t'分隔.要求汇总不同国家的IP数,并以国家名为文件名将其输出.解读:M ...

  6. JAVA链接数据库

    链接:http://www.cnblogs.com/centor/p/6142775.html 开发工具: MyEclipse MySQL JDBC驱动:mysql-connector-java-5. ...

  7. heartbeat-gui

    一.简介gui heartbeat的v2版本将v1中haresources配置文件使用GUI图形配置接口来配置高可用集群.更加便捷,直观. 二.准备条件和资源规划见上文http://www.cnblo ...

  8. js 日期 处理 加减时分秒

    1.日期处理 var _d = new Date("2018/01/01 12:00:00"); _d = new Date(_d.valueOf() + 60 * 1000);/ ...

  9. apache解压版安装服务

    解压版也就是绿色版 到apache/bin目录 然后运行下面命令 httpd.exe -k install -n "Apache24" 如果要卸载服务的话,就是下面这个命令 htt ...

  10. 几种创建XMLHttpRequest对象的方法

    XMLHttpRequest对象,也就是Ajax交互的核心对象. 这里列举三种创建Ajax对象的方法. 第一种: <!DOCTYPE html> <html> <head ...