1. 定义过渡样式:

 <style>
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }
 ​
    .list-enter-active,
    .list-leave-active {
      transition: all 0.3s ease;
    }
 </style>
  1. 定义DOM结构,其中,需要使用 transition-group 组件把v-for循环的列表包裹起来:

   <div id="app">
    <input type="text" v-model="txt" @keyup.enter="add">
 ​
    <transition-group tag="ul" name="list">
      <li v-for="(item, i) in list" :key="i">{{item}}</li>
    </transition-group>
  </div>
  1. 定义 VM中的结构:

     // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        txt: '',
        list: [1, 2, 3, 4]
      },
      methods: {
        add() {
          this.list.push(this.txt);
          this.txt = '';
        }
      }
    });

Vue学习笔记【21】——Vue中的动画(v-for 的列表过渡)的更多相关文章

  1. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  2. 【Vue学习笔记】—— vue的基础语法 { }

    学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...

  3. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  4. vue学习笔记:vue的认识与特点与获取

    Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...

  5. 【学习笔记】jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  6. Vue学习笔记之Nodejs中的NPM使用

    0x00 NPM是什么 简单的说,npm就是JavaScript的包管理工具.类似Java语法中的maven,gradle,python中的pip. 0x01 NPM安装 傻瓜式的安装. 第一步:打开 ...

  7. vue学习笔记—bootstrap+vue用户管理

    vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...

  8. Vue学习笔记之Vue学习前的准备工作

    0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...

  9. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

随机推荐

  1. R2CNN论文思路记录

    Rotational region cnn 我们的目标是检测任意方向的场景文本,与RRPN类似,我们的网络也基于FasterR-CNN ,但我们采用不同的策略,而不是产生倾斜角度建议. 我们认为RPN ...

  2. docker 运行jenkins及vue项目与springboot项目(五.jenkins打包springboot服务且在docker中运行)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...

  3. mybatis中一对多查询collection关联不执行

    今天遇到的原因是因为下面红底id没有,导致关联查询没有条件(id字段没传),所以一直没有执行. <?xml version="1.0" encoding="UTF- ...

  4. Andrdoid中对应用程序的行为拦截实现方式之----从Java层进行拦截

    致谢: 感谢 简行之旅的这篇blog:http://blog.csdn.net/l173864930/article/details/38455951,这篇文章是参考这篇blog的进行一步一步操作的, ...

  5. js事件---同一个事件实现全选与反选功能

    背景: 点击头部按钮,实现全选与反选功能 1.绑定事件,把当前勾选状态传递给方法 $event <el-checkbox v-model="ModelCheckAll" cl ...

  6. delphi遍历指定目录下指定类型文件的函数

    遍历指定目录下指定类型文件的函数// ================================================================// 遍历某个文件夹下某种文件,/ ...

  7. JMeter 阶梯式加压测试插件 Stepping Thread Group

    在日常性能测试过程中,有时需要对被测对象不断的增加压力,直至达到某个值后,并持续运行一段时间.这里将借助jmeter插件模拟这种情况. 本文介绍在jmeter中,使用插件Stepping Thread ...

  8. PHP基础知识总结(三) 流程控制、函数、类对象和数据库

    PHP基础语法 1.流程控制 条件语句:if  elseif  else / switch if($a == 1){ …… } elseif ($a == 2){ …… } else{ …… } 循环 ...

  9. Redis入门很简单之一【简介与环境搭建】

    Redis入门很简单之一[简介与环境搭建] 博客分类: NoSQL/Redis/MongoDB redisnosqlmemcached缓存中间件  [Redis简介] <一>. NoSQL ...

  10. 5. 使用grafana模板

    我们刚刚配置的Dashboard还是有点简陋,为了界面美观,这里我们这里使用一些模板 1.使用node_exporter模板 去grafana官网下载模板,点击Download,如下所示 2.导入模板 ...