Vue学习-v-for条件过滤（五）

话不多说没难度，直接代码
效果：

list格式如下：

1.v-for

<div class="flex">
	<h2>普通for循环</h2>
	<ul>
		<li v-for="(item,index) in list" :key="item.id">{{index}}---{{item.name}}</li>
	</ul>
</div>

2.v-for条件过滤

<div class="flex">
	<h2>条件过滤for（id为偶数）</h2>
	<ul>
		<li v-for="(item,index) in listcom" :key="item.id">{{index}}---{{item.name}}</li>
	</ul>
</div>

computed: {
	listcom() {
		return this.list.filter(function(data) {
			//只返回id是偶数的
			return data.id % 2 === 0
		})
	}
}

3.双层for

<div class="flex">
	<h2>双层for循环</h2>
	<ul v-for="listse in list">
		<span style="color: #00008B;">歌手：{{listse.name}}</span>
		<li v-for="message in listse.message">{{message}}</li>
	</ul>
</div>

4.v-for实现li的动画效果

<div class="flex">
	<h2>li动画效果</h2>
	<button type="button" @click="addLi">添加一条li</button>
	<button type="button" @click="delLi">删除一条li</button>
	<ul>  //appear 页面刷新完成执行动画
		<transition-group appear
		enter-active-class="slideInRight" 
		leave-active-class="lightSpeedOut">
			<li v-for="(item,index) in list" :key="index" class="animated">{{index}}---{{item.name}}</li>
		</transition-group>
	</ul>
</div>

methods: {
	addLi() {
		this.list.push({
			name : '新name'
		})
	},
	delLi(){
		this.list.splice(1,1)
	}
},