<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表的过渡</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 过渡样式fade-enter-active进入 ; fade-leave-active离开*/
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
/* fade-enter进入 fade-leave-to离开 */
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="user" /><button @click="addUser">添加</button>
<p>{{arr}}</p>
<transition-group tag="ul" name='fade'>
<!-- index是索引,删除的时候的下标 -->
<!-- key推荐使用value,但要保证value唯一,不然会出错,index索引也唯一,但不推荐使用,过渡效果会出问题 -->
<li v-for="value,index in arr" :key='value'>{{value}} <button @click="delUser(index)">删除</button></li>
</transition-group>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
user:'',
arr:[]
},
components:{
},
methods:{
addUser:function(){
this.arr.push(this.user);
this.user=''
},
delUser:function(index){
this.arr.splice(index,1)
}
}
});
</script>
列表的过渡一点一点透
最新推荐文章于 2020-08-04 12:46:54 发布