<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>
vue的简单tab切换
猜你喜欢
转载自blog.csdn.net/qq_39603448/article/details/89918171
今日推荐
周排行