<!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,k) in comments">

        <!--把当前为第几次传给remove函数-->

        {{k}}=>{{v.content}} <button v-on:click="remove(k)">删除</button>

    </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: {

            remove(k){

                this.comments.splice(k,1); //循环从当前条数开始移到1条数据

            },

            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>

效果:

22.VUE学习之-replice删除当前评论条数的更多相关文章

  1. Vue学习之todolist删除功能

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

  2. 24.VUE学习之-变异方法filter与regexp实现评论搜索功能

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

  3. Vue 变异方法splice删除评论功能

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

  4. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  5. Vue 变异方法sort&reverse对评论进行排序

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

  6. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  7. Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  8. Vue学习之路---No.4（分享心得，欢迎批评指正）

    这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一 ...

  9. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. Storm概念学习系列之storm出现的背景

      不多说,直接上干货! storm出现的背景 互联网从诞生的第一时间起,对世界的最大改变就是让信息能够实时交互,从而大大加速了各个环节的效率.正因为大家有对信息实时响应.实时交互的需求,所以软件行业 ...

  2. placeholder-shown

    一般我们常见placeholder伪类选择器用来修改默认样式及文案,忽然发现placeholder-shown伪类选择器,比较官方的解释是 CSS伪类表示任何显示占位符文本的form元素. 简单来说就 ...

  3. 提高PHP编程效率的20个要点

    用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则 不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中 ...

  4. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  5. 给类型为text的input设置value值却无法修改

    给类型为text的input设置value值后就无法修改了 我的页面显示为如下但是退格却无法改变他的值 原来是缺少onChange事件,没法监听value的改变 所以需要添加 onChange={th ...

  6. yum 和 rpm安装mysql彻底删除

    1.yum方式安装的MySQL $ yum remove mysql mysql-server mysql-libs compat-mysql51 $ rm -rf /var/lib/mysq $ r ...

  7. Android使用文件管理器打开指定文件夹，浏览里面的内容

    Android下可以打开一些文件,带有.doc 等后缀的文件网上一般都有解释,这个写一个使用文件管理器打开指定文件夹的 private void openAssignFolder(String pat ...

  8. 【Android开发笔记】底部菜单栏 FragmentTabHost

    公司项目,需求本来是按照谷歌官方指南写的,菜单栏设计成在导航栏下方 结果呢,审评时,BOSS为了和iOS统一,改成了底部菜单栏(标准结局),我只能呵呵呵呵呵呵呵 查了查资料发现实现底部菜单栏用的是Fr ...

  9. 编程之美2015 资格赛 hihocoder 题目2: 回文字符序列

    思路:暴力搜,用BFS的方式,生成每一种可能,再对每一种可能进行判断是否回文,进行统计.严重超时!计算一个25个字符的,大概要20多秒! #include <iostream> #incl ...

  10. CRM User Status profile中Business Transaction字段的用途

    有朋友问到User Status profile中Business Transaction字段的用途,如下图INPR, FINI所示. 实际上,这个字段作为一个桥梁,连接了User Status和Sy ...