<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/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('pre')">发表到前面</button>

    <br>

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

    <button v-on:click="del('first')">删除第一条评论</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 'pre':

                        this.comments.unshift(content);

                        break;

                }

                this.current_content = '';

            },

            del(type){

                switch (type) {

                    case 'last':

                        this.comments.pop();

                        break;

                    case 'first':

                        this.comments.shift();

                        break;

                }

            }

        }

    });

</script>

</body>

</html>

效果:

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

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

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

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

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

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

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

  4. vue数组变异方法

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

  5. 20.VUE学习之-变异方法push的留言版实例讲解

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

  6. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  7. 【iOS开发-21】UINavigationController导航控制器初始化，导航控制器栈的push和pop跳转理解

    (1)导航控制器初始化的时候一般都有一个根视图控制器,导航控制器相当于一个栈,里面装的是视图控制器,最先进去的在最以下,最后进去的在最上面.在最上面的那个视图控制器的视图就是这个导航控制器对外展示的界 ...

  8. Vue学习四：v-if及v-show指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  9. 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解

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

随机推荐

  1. Java文件与io——字节流

    FileOutputStream用于写入诸如图像数据之类的原始字节的流 字节输出流:OutputStream 此抽象类表示输出字节流的所有类的超类.(写) 字节输入流:InputStream(读) p ...

  2. Spark Mllib里的分层抽样（使用map作为分层抽样的数据标记）

    不多说,直接上干货! 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mllib数理统计

  3. 将本地代码添加到github

    首先在github上创建一个仓库. 第一步:建立本地仓库 git init 关联远程仓库 git remote add origin https://github.com/tshua/***.git ...

  4. Python3基础（4）匿名函数、装饰器、生成器、迭代器、内置函数、json&pickle序列化、软件目录开发规范、不同目录间模块调用

    ---------------个人学习笔记--------------- ----------------本文作者吴疆-------------- ------点击此处链接至博客园原文------ 1 ...

  5. js 数组操作常用方法

    push():在数组后面加入元素,并返回数组的长度: unshift():在数组前面就如元素,并返回数组的长度: pop():删除最后一个元素: var arr =[1,2,3,4,5] ; arr. ...

  6. 开发环境中快速部署Oracle Essbase（Rapid deployment of oracle essbase in development envrioments）

    版本:Oracle Enterprise Performance Management System Release11.1.2.4 快速部署自动安装组件: Essbase Oracle Essbas ...

  7. Thread.sleep 与Thread.currentThread.sleep

    参考博客: https://blog.csdn.net/guangyinglanshan/article/details/51645053 公司项目近段时间要使用thread, 个人想去了解Threa ...

  8. OutOfMemoryError异常 和 StackOverflowError异常

      OutOfMemoryError异常  StackOverflowError异常  程序计数器 无 无 Java虚拟机栈 如果虚拟机栈可扩展,扩展时无法申请到足够内存 线程请求的栈深度大于虚拟机所 ...

  9. LeetCode Valid Anagram （简单题）

    题意: 给出两个字符串s和t,判断串t是否为s打乱后的串. 思路: 如果返回的是true,则两个串的长度必定相等,所有字符出现的次数一样.那么可以统计26个字母的次数来解决,复杂度O(n).也可以排序 ...

  10. hadoop balance均衡datanode存储不起作用问题分析

    前段时间因为hadoop集群各datanode空间使用率很不均衡,需要重新balance(主要是有后加入集群的2台机器磁盘空间比较大引起的),在执行如下语句: bin/start-balancer.s ...