<!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. ［转］logX<X对所有的X>0成立

    本文引用地址:http://blog.sciencenet.cn/blog-1865911-831450.html 此文来自科学网何召卫博客,转载请注明出处. 这个命题网上有多种证法,有人甚至采用斜率 ...

  2. ASP.NET 中Textbox只能输入数字，不能输入其他字符

    解决办法如下:  <asp:TextBox ID="txtpage" runat="server" Width="61px"     ...

  3. 在Azure上搭架***代理服务器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在Azure上搭架***代理服务器.

  4. 01html基础

    01_html 1 Mac中的快捷键 基础快捷键: command+c 复制 command+v 粘贴 command+m 最小化当前窗口 Shift+command+c 桌面环境打开Finder c ...

  5. thinkphp简易搜索

    需求: 用户输入关键词,选项卡的每个选项输出一个分类的列表内容,分类有文章.ppt.学习. 实现过程: 视图中用户输入的关键词post给控制器,控制器对这个关键词做三次模糊查询处理,因为是三个分类对应 ...

  6. 云为 | 提供海外 IT 人才派遣、猎头、人力资源外包服务

    云为是大连信为软件开发有限公司为人力资源外包服务创建的品牌,是中国专业的人力资源外包领域的服务商,在信息技术行业为海外企业雇主招聘合格.专业且技能熟练的精英人士.我们的客户涵盖了日本上市公司和​​株式 ...

  7. 【Java/Android性能优 7】Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

    本文转自:http://www.trinea.cn/android/android-common-lib/ 介绍总结的一些android公共库,包含缓存(图片缓存.预取缓存.网络缓存).公共View( ...

  8. nginx学习书籍推荐

    最好的书是源码 深入理解NGINX" 陶辉著 <实战Nginx...>张宴 <深入理解Nginx:模块开发与架构解析> nginx开发从入门到精通 Nginx HTT ...

  9. python3基础06（随机数的使用）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import osimport randomimport string la=[0,1,2,3,4,5,6,7, ...

  10. ubuntu openstack windows 镜像制作

    openstack  windows 镜像制作 首先下载windows所需要的驱动,virtio-win-1.1.16.vfd virtio-win-0.1-59.iso 下载的官方地址是: http ...