<!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. Postman安装步骤

    Postman是一种网页调试与发送网页http请求的chrome插件. 我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 1.Postman_v4.1.3下载地址: http: ...

  2. Java 内存模型（零）

    经典老图: 方法区和堆:由所有线程共享的数据区 虚拟机栈和本地方法栈和程序计数器:线程隔离的数据区 后面一步步讲这个图里面所涉及到的内容,待续...

  3. java多线程关键字volatile的使用

    java多线程关键字volatile的作用是表示多个线程对这个变量共享. 如果是只读的就可以直接用,写数据的时候要注意同步问题. 例子: package com.ming.thread.volatil ...

  4. 白话SpringCloud | 第一章：什么是SpringCloud

    前言 作为SpringCloud的正式第一章,我们先来简单了解下SpringCloud相关知识点吧,内容可能比较多. 何为微服务 传统单体架构 服务化架构 微服务架构 什么是SpringCloud 核 ...

  5. asp.net MVC 中枚举创建下拉列表？

    我将尝试使用 Html.DropDownList 扩展方法,但不能找出如何使用它的枚举. 让我们说我有一个这样的枚举: public enum ItemTypes { Movie = 1, Game ...

  6. log4net 最快速体验

    本文供实习司机快速上手log4net最基本功能,共4步,3分钟搞定. 一.添加log4net.dll引用,可使用nuget安装或直接引用文件 二.添加配置 在app.config或web.config ...

  7. 【踩坑】socket.io服务器不能访问

    今天在单机测试socket.io服务器时一切正常,但用jar包的方式部署在服务器时发现客户端无法连接. 于是做了一系列排查,如检查端口是否在占用,防火墙有没有开放该端口,阿里云终端是否有开放安全组,本 ...

  8. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  9. hibernate课程 初探单表映射1-6 hibernate项目建立以及导入jar包

    hibernate 项目建立 1 new ==>java project hibernate 导入jar包 1 windows==>prerence==>java ==>bui ...

  10. 小图示优化 - ASP.NET Sprite and Image Optimization (Web Form)

    小图示优化 - ASP.NET Sprite and Image Optimization (Web Form) 透过 NuGet安装下面的套件,可以将您的小图示(icon)合并成一张图 透过 CSS ...