1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
  6.     <script type="text/javascript" src="../js/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="hdcms">
  10.     <li v-for="(v,k) in comments">
  11.         <!--把当前为第几次传给remove函数-->
  12.         {{k}}=>{{v.content}} <button v-on:click="remove(k)">删除</button>
  13.     </li>
  14.     <textarea v-model="current_content" cols="30" rows="10"></textarea><br>
  15.     <button v-on:click="push('end')">发表到后面</button>
  16.     <button v-on:click="push('pre')">发表到前面</button>
  17.     <br>
  18.     <button v-on:click="del('last')">删除最后一条评论</button>
  19.     <button v-on:click="del('first')">删除第一条评论</button>
  20. </div>
  21. <script>
  22.     var app = new Vue({
  23.         el: '#hdcms',
  24.         data: {
  25.             //当前用户输入内容
  26.             current_content: '',
  27.             comments: [
  28.                 {content: '后盾人'},
  29.                 {content: '向军老师'},
  30.             ]
  31.         },
  32.         methods: {
  33.             remove(k){
  34.                 this.comments.splice(k,1); //循环从当前条数开始移到1条数据
  35.             },
  36.             push(type){
  37.                 var content = {content: this.current_content}
  38.                 switch (type) {
  39.                     case 'end':
  40.                         this.comments.push(content);
  41.                         break;
  42.                     case 'pre':
  43.                         this.comments.unshift(content);
  44.                         break;
  45.                 }
  46.                 this.current_content = '';
  47.             },
  48.             del(type){
  49.                 switch (type) {
  50.                     case 'last':
  51.                         this.comments.pop();
  52.                         break;
  53.                     case 'first':
  54.                         this.comments.shift();
  55.                         break;
  56.                 }
  57.             }
  58.         }
  59.     });
  60. </script>
  61. </body>
  62. </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. URAL 2080 Wallet

    找规律发现只要找到两个相同数字之间,有多少个不同的数字,即为答案. 可以用树状数组离线处理. 坑点是卡有很多张,没用完的情况,后面的卡直接放在哪里, 就是 10 5 1 2 3 4 5 这样 开始数据 ...

  2. easyui databox获取当前时间

    class=easyui-datebox $(document).ready(function() {             $("#thedate").datebox(&quo ...

  3. .net 记录

    Stack Overflow 2016最新架构探秘 http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi#rd N ...

  4. ZK请求处理

    1. 事务请求转发-事务必须由Leader处理 所有非Leader的服务器收到来自客户端的事务请求,都会将客户端请求已REQUEST形式转发给Leader服务器进行处理 2. 事务处理 Proposa ...

  5. android 开发-文件存储之读写sdcard

    android提供对可移除的外部存储进行文件存储.在对外部sdcard进行调用的时候首先要调用Environment.getExternalStorageState()检查sdcard的可用状态.通过 ...

  6. php 转码函数 你还在用iconv吗？-- 解决sqlserver插入中文失败问题

    文章来源 :http://www.veryhuo.com/a/view/41348.html 这次给客户同步sqlserver数据,临时搭的 PHP Query Analyzer 插入某些中文一直有些 ...

  7. 设计模式--观察者模式(KVO)

    观察者模式(Observer):观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态上发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 举个例子, ...

  8. 《大话设计模式》num01---简单工厂模式

    2017年12月10日 20:13:57 独行侠的守望 阅读数:128更多个人分类: 设计模式编辑版权声明:本文为博主原创文章,转载请注明文章链接. https://blog.csdn.net/xia ...

  9. LVS Direct Routing 直接路由

    1. Direct Routing 直接路由 director分配请求到不同的real server, real server处理请求后直接回应给用户,这样director负载均衡器仅处理客户机与服务 ...

  10. Android商城开发系列（十二）—— 首页推荐布局实现

    首页新品推荐的布局效果如下图: 这块布局是使用LinearLayout和GridView去实现,新建recommend_item.xml,代码如下所示: <?xml version=" ...