<!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. RabbitMQ使用教程（四）如何通过持久化保证消息99.99%不丢失？

    1. 前情回顾 RabbitMQ使用教程(一)RabbitMQ环境安装配置及Hello World示例 RabbitMQ使用教程(二)RabbitMQ用户管理,角色管理及权限设置 RabbitMQ使用 ...

  2. form中onsubmit的使用

    form 中的onsubmit在点submit按钮时被触发,如果return false;则结果不会被提交到action中去(也就是提交动作不会发生),如果不返回或者返回true,则执行提交动作.(& ...

  3. SpringBoot | 第二十四章：日志管理之AOP统一日志

    前言 上一章节,介绍了目前开发中常见的log4j2及logback日志框架的整合知识.在很多时候,我们在开发一个系统时,不管出于何种考虑,比如是审计要求,或者防抵赖,还是保留操作痕迹的角度,一般都会有 ...

  4. SpringBoot | 第十九章：web应用开发之WebSocket

    前言 web开发也讲解了三章了,这章节开始讲解关于与前端通信相关知识.实现一个在线聊天室类似的功能或者后端推送消息到前端,在没有WebSocket时,读大学那伙还有接触过DWR(Direct Web ...

  5. <linux下extmail服务的搭建>

    下载2个软件包: extmail-1.1.0.tar.gz     extman-1.1.tar.gz 下载地址:http://www.cpan.org/ 创建extsuite目录 mkdir /va ...

  6. 在Controller方法执行之前进行捕获请求，进行类型的转换

    @ExceptionHandler(TypeMismatchException.class) public ModelAndView ParseException(Excetion ex,HttpSe ...

  7. java 整型相除得到浮点型

    public class TestFloatOrDouble { public static void main(String[] args) { Point num1 = new Point(84, ...

  8. 锁丶threading.local丶线程池丶生产者消费者模型

    一丶锁 线程安全: 线程安全能够保证多个线程同时执行时程序依旧运行正确, 而且要保证对于共享的数据,可以由多个线程存取,但是同一时刻只能有一个线程进行存取. import threading v = ...

  9. python基本数据类型,int,bool,str

    一丶python基本数据类型 1.int 整数,主要用来进行数学运算. 2.str 字符串,可以保存少量数据并进行相应的操作 3.bool 判断真假.True.False 4.list 存储大量数据, ...

  10. UEditor百度编辑器

    第一步:首先下载ueditor编译器,地址:http://ueditor.baidu.com/website/ 下载完解压之后就这个: 第二步:我会把文件名utf-8-jsp这个文件名改为uedito ...