vue实现简单的tab切换
点击预览下面是代码 html<div id="app"><ul><li><span v-bind:class="{current: num == 1}" v-on:click="change(1)">电影</sp
·
下面是代码
html
<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>
<li><span v-bind:class="{current: num==3}" v-on:click="change(3)">图片</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>
css
ul {
height: 50px
}
ul li {
float: left;
width: 50px;
height: 30px;
border-color: #000;
cursor: pointer;
}
.current {
color: red
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.move-enter,
.move-leave-to {
transform: translateY(10px) rotate(360deg)
}
.move-enter-active,
.move-leave-acitve {
transition: all 1s
}
js
new Vue({
el: '#app',
data: {
num: 1
},
methods: {
change: function(index) {
this.num = index
}
}
})
之前一直用的是react, 最近简单的看了下vue文档,写了个简单的tab切换,主要是熟悉一下, 就是根据点了哪个span来对应的改变num的值,在内容的div,使用条件判断来显示对应的div
更多推荐
已为社区贡献1条内容
所有评论(0)