vue的简单tab切换

<template>
	<div :class="wholecss?'daytime':'atnight'">
		<div id="app">
			<ul>
				<li><span v-bind:class="{current: num == 1}" v-on:click="change(1)">电影</span></li>
				<li><span v-bind:class="{current: num==2}" v-on:click="change(2)">动漫</span></li>
			</ul>
			<div class="content">
				<transition name="fade">
					<div v-show="num == 1">1</div>
				</transition>
				<transition name="move">
					<div v-show="num == 2">2</div>
				</transition>
				<transition name="fade">
					<div v-show="num == 3">3</div>
				</transition>
			</div>
		</div>

	</div>

</template>

<script>
	export default {
		name: 'register',

		data(){
			return{
					num: 1,
					wholecss:""
			}
		},
		methods: {
			change: function(index) {
				this.num = index
			}
		}


	}
</script>


<style lang="less" scoped>
	
</style>

猜你喜欢

转载自blog.csdn.net/qq_39603448/article/details/89918171