<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
? ? <style>
? ? ? ? li{
? ? ? ? ? ? border:1px dashed #999999;
? ? ? ? ? ? margin:5px;
? ? ? ? ? ? line-height:35px;
? ? ? ? ? ? padding-left:5px;
? ? ? ? ? ? font-size:12px;
? ? ? ? ? ? width:100%;
? ? ? ? }
? ? ? ? .v-enter,
? ? ? ? .v-leave-to{
? ? ? ? ? ? opacity:0;
? ? ? ? ? ? transform:translateY(80px);
? ? ? ? }
? ? ? ? .v-enter-active,
? ? ? ? .v-leave-active{
? ? ? ? ? ? transition:all 0.6s ease;
? ? ? ? }
? ? ? ? .v-move{
? ? ? ? ? ? transition:all 0.6s ease;
? ? ? ? }
? ? ? ? .v-leave-active{
? ? ? ? ? ? position:absolute;
? ? ? ? }
? ? ? ? li:hover{
? ? ? ? ? ? background:pink;
? ? ? ? ? ? transition:all 0.4s ease;
? ? ? ? }
? ? </style>
</head>
<body>
<div id="app">
? ? <div>
? ? ? ? <label>
? ? ? ? ? ? id:
? ? ? ? ? ? <input type="text" v-model="id">
? ? ? ? </label>
? ? ? ? <label>
? ? ? ? ? ? name:
? ? ? ? ? ? <input type="text" v-model="name">
? ? ? ? </label>
? ? ? ? <input type="button" value="添加" @click="add">
? ? </div>
? ? <div>
? ? ? ? <!--在實(shí)現(xiàn)列表過(guò)渡的時(shí)候，如果需要過(guò)渡的元素，是v-for循環(huán)渲染出來(lái)的，不能用transition包裹，需要使用transitionGroup-->
? ? ? ? <!--如果要為v-for循環(huán)創(chuàng)建的元素設(shè)置動(dòng)畫(huà)，必須為每一個(gè)元素設(shè)置：key屬性-->
? ? ? ? <!--給transition-group添加appear屬性，實(shí)現(xiàn)頁(yè)面剛展示出來(lái)的時(shí)候的效果-->
? ? ? ? <transition-group appear tag="ul">
? ? ? ? ? ? <li v-for="(item,i) in list" :key="item.id">
? ? ? ? ? ? ? ? {{item.id}}--{{item.name}}
? ? ? ? ? ? ? ? <input type="button" value="刪除" @click="del(i)">
? ? ? ? ? ? </li>
? ? ? ? </transition-group>
? ? </div>
</div>
<script>
? ? var vm=new Vue({
? ? ? ? el:"#app",
? ? ? ? data:{
? ? ? ? ? ? id:"",
? ? ? ? ? ? name:"",
? ? ? ? ? ? list:[
? ? ? ? ? ? ? ? {id:1,name:"趙高"},
? ? ? ? ? ? ? ? {id:2,name:"秦檜"},
? ? ? ? ? ? ? ? {id:3,name:"嚴(yán)嵩"},
? ? ? ? ? ? ? ? {id:4,name:"魏忠賢"}
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? add(){
? ? ? ? ? ? ? ? this.list.push({id:this.id,name:this.name});
? ? ? ? ? ? ? ? this.id="";
? ? ? ? ? ? ? ? this.name="";
? ? ? ? ? ? },
? ? ? ? ? ? del(i){
? ? ? ? ? ? ? ? this.list.splice(i,1);
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>
</body>
</html>
