vue.js基础之列表过渡

前端yyds无敌

于 2021-08-09 20:48:04 发布

阅读量159

点赞数

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/hdb2405474279/article/details/119546642

版权

vue.js 专栏收录该内容

23 篇文章

订阅专栏

详细请参考官网：状态过渡 — Vue.js (vuejs.org)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表过渡</title>
		<script src="../js/vue.js"></script>
	</head>
	<style>
	.v-enter, .v-leave-to{
		opacity: 0;
	}

	.v-enter-active, .v-leave-active{
		transition: opacity 1s;
	}
	</style>
	<body>
		<div id="app">
			<transition-group>
				<div v-for="item of list" :key="item.id">
					{{item.title}}
				</div>
			</transition-group>
			<button @click="but">增加</button>
		</div>
		
		<script>
		var count = 0;
		var app =new Vue({
			el:"#app",
			data:{
				list:[]
			},
			methods:{
				but:function(){
					this.list.push({
						id:count++,
						title:"你好世界"
					})
				}
			}
		})
		</script>
	</body>
</html>