<!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. Jenkins的权限控制和Rundeck的远程认证

    1.权限控制的基本设置 1.1选择基于角色权限的分配策略 1.2 配置全局权限和项目权限 具体的权限对应关系见下表: Overall(全局) Credentials(凭证) Slave(节点) Job ...

  2. windows平台kettle连接hbase的问题

    我本机安装的环境是centos7,并在本机上安装了zookeeper,hadoop,hbase,hive等组件, 使用pdi7.1来连接hbase,把mysql表中的数据导出到hbase中去,没有问题 ...

  3. iOS 关于BTC 一些知识点

    1.BTC 用这个网 可以校验 自己的库生成的助记词 地址 是否是合法正常的 https://iancoleman.io/bip39/ 2.知晓 BTC 钱包是否有钱 和交易记录 https://te ...

  4. shell脚本批量启动zookeeper

    脚本名称为zk_run.sh 将下面代码粘贴进zk_run.sh 添加执行权限 chmode +x zk_run.sh 运行脚本 ./zk_run.sh start 如果发现zookeeper没有启动 ...

  5. 由浅入深之Tensorflow(2)----logic_regression实现

    import tensorflow as tf import numpy as np from tensorflow.examples.tutorials.mnist import input_dat ...

  6. python3 驱动 PyMySQL

    Python版本: 3.5.0 MySqlDB官网只支持Python3.4,  使用第三方库PyMysql连接Mysql数据库. https://pypi.python.org/pypi/PyMySQ ...

  7. tomcat源码调试

    三.tomcat目录结构 tomcat的下载安装有很多教程,不再赘述. 现在的tomcat已经到9了,当tomcat下载安装完成后,其目录大致如下:     除了上面的文件夹,还有四个文件:     ...

  8. pycharm 小知识

    pycharm使用过程小知识: 1.pycharm定义项目或脚本抬头模版:setting ——Editor——File and Code Templates,右侧选择Python Script: 2. ...

  9. 基于JWT的token身份认证方案

    一.使用JSON Web Token的好处? 1.性能问题. JWT方式将用户状态分散到了客户端中,相比于session,可以明显减轻服务端的内存压力. Session方式存储用户id的最大弊病在于S ...

  10. JAVA面试题整理（3）-Spring

    1.BeanFactory 和 FactoryBean? 2.Spring IOC 的理解,其初始化过程? 3.BeanFactory 和 ApplicationContext? 4.Spring B ...