console 命令行工具 X clear

console

    	var items =[1,2,3,4,5]
      var id = items.length +1
      
      var vm= new Vue({
        	el:'#el',
          data:{
						items:items
          },
        components:{
          item:{
            props:['msg'],
            template:`
							<div>{{msg}} <button @click="$emit('rm')">x</button></div>
						`
          }
        },
        methods:{
          insert(){
     				var i = Math.round(Math.random() * this.items.length)
            this.items.splice(i, 0, id++)
          },
          reset(){
            this.items = [1,2,3,4,5]
          },
          shuffle(){
   					this.items = _.shuffle(this.items)
          },
          remove(item){
            	var i = this.items.indexOf(item)
              if(i > -1){
                	this.items.splice(i,1)
              }
          }
        }
      })

<!DOCTYPE html>
<html>
  <head charset="utf-8">
      <title>Move Animations</title>
  </head>

  
  <body>
    <div id="el">
      <button @click="insert">insert at random index</button>
      <button @click="reset">reset</button>
      <button @click="shuffle">shuffle</button>
      
      <transition-group tag="ul" name="fade" class="container">
          <item v-for="item in items"
                class="item"
                :msg="item"
                :key="item"
                @rm="remove(item)">
              
          </item>
      </transition-group>
    </div>
  </body>
  

</html>

   .container{
      position:relative;
      padding:0;
    }
    .item{
      width:100%;
      height:100%;
      background-color:#f3f3f3;
      border:1px solid #666;
      box-sizing:border-box;
    }
/*!,declare transition**/
.fade-move,.fade-enter-active,.fade-leave-active{
  transition:all .5s cubic-bezier(.55,0,.1,1);
}

/*declare enter from and leave to state**/
.fade-enter,.fade-leave-to{
  opacity:0;
  transform:scaleY(0.01) translate(30px,0);
}