vue中列表过渡22

最新推荐文章于 2024-07-05 08:45:00 发布

百味皆苦

最新推荐文章于 2024-07-05 08:45:00 发布

阅读量141

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36925536/article/details/91402410

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中列表过渡22</title>
		<script src="vue.js"></script>
		<script src="velocity.js"></script>
		<style type="text/css">
			.v-enter,
			.v-leave-to{
				opacity: 0;
			}
			.v-enter-active,
			.v-leave-active{
				transition: opacity 1s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--3：使用group标签，相当于给里边的每一个div都套了一层transition-->
			<transition-group>
				<div v-for="item of list" :key="item.id">
					{{item.title}}
				</div>
			</transition-group>
			<button @click="handleBtnClick">add</button>
		</div>
		<script>
			/*1：定义一个计数器*/
			var count=0;
	
			var vm=new Vue({
				el:'#app',
				data:{
					list:[]
				},
				methods:{
					/*2：当点击按钮的时候，每点击一次，list中加一个hello world*/
					handleBtnClick:function(){
						this.list.push({
							id:count++,
							title:'hello world'
						})
					}
				}
			})
		</script>
	</body>
</html>