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 in comments">
  11.         {{v.content}}
  12.     </li>
  13.     <textarea v-model="current_content" cols="30" rows="10"></textarea><br>
  14.     <button v-on:click="push('end')">发表到后面</button>
  15.     <button v-on:click="push('pre')">发表到前面</button>
  16.     <br>
  17.     <button v-on:click="del('last')">删除最后一条评论</button>
  18.     <button v-on:click="del('first')">删除第一条评论</button>
  19. </div>
  20. <script>
  21.     var app = new Vue({
  22.         el: '#hdcms',
  23.         data: {
  24.             //当前用户输入内容
  25.             current_content: '',
  26.             comments: [
  27.                 {content: '后盾人'},
  28.                 {content: '向军老师'},
  29.             ]
  30.         },
  31.         methods: {
  32.             push(type){
  33.                 var content = {content: this.current_content}
  34.                 switch (type) {
  35.                     case 'end':
  36.                         this.comments.push(content);
  37.                         break;
  38.                     case 'pre':
  39.                         this.comments.unshift(content);
  40.                         break;
  41.                 }
  42.                 this.current_content = '';
  43.             },
  44.             del(type){
  45.                 switch (type) {
  46.                     case 'last':
  47.                         this.comments.pop();
  48.                         break;
  49.                     case 'first':
  50.                         this.comments.shift();
  51.                         break;
  52.                 }
  53.             }
  54.         }
  55.     });
  56. </script>
  57. </body>
  58. </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. c#文件相关笔记

    1.将*.txt文件内容转换为一个字符串str FileStream fs = new FileStream("路径\\*.txt", FileMode.Open); Stream ...

  2. SpringBoot | 第二十六章：邮件发送

    前言 讲解了日志相关的知识点后.今天来点相对简单的,一般上,我们在开发一些注册功能.发送验证码或者订单服务时,都会通过短信或者邮件的方式通知消费者,注册或者订单的相关信息.而且基本上邮件的内容都是模版 ...

  3. H5移动端原生长按事件

    // 函数名longpress// 参数为: 需长按元素的id.长按之后处理函数func function longPress(id, func,timeout=500) { var timeOutE ...

  4. hadoop集群搭建简要记录

    2019/03/09 21:46 准备4台服务器或者虚拟机[centos7],分别设置好静态ip[之所以设置静态ip主要就是为了省心!!!][ centos7下面配置静态IP  参考地址: https ...

  5. vim常用命令大全

    在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n==排版,相当于一般IDE里的code format.使 ...

  6. 【Python】python2 html safe string

    import cgi s = '<>&' s += u'哈哈' print type(s) print s r = cgi.escape(s) print type(r) prin ...

  7. Vue.js（2.x）之列表渲染（v-for/key）

    1.v-for是Vue里的循环语句,与其他语言的循环大同小异.首先得有需要循环且不为空的数组,循环的关键字为in或of. 需要索引时的写法: v-for里的in可以使用of代替: 还可以使用v-for ...

  8. php 03

    php03 一.判断类型 is_bool()   判断是否是布尔型 is_int(),is_integer() 和is_long()  判断是否是整型 is_float(),is_double()和i ...

  9. ElasticSearch 5学习(5)——第一个例子

    想要知道ElasticSearch是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...

  10. sql server 2016新特性 查询存储（Query Store）的性能影响

    前段时间给客户处理性能问题,遇到一个新问题, 客户的架构用的是 alwayson ,并且硬件用的是4路96核心,内存1T ,全固态闪存盘,sql server 2016 . 问题  描述 客户经常出现 ...