vue实现tab选项卡切换效果
tab选项卡切换效果:
通过点击事件传入参数,然后通过v-show来进行切换显示
<template> <div class="box"> <div class="tab"> <span @click="cur = 0">首页</span> <span @click="cur = 1">广场</span> <span @click="cur = 2">我的</span> </div> <div class="content"> <div v-show="cur == 0"> 首页首页首页首页首页首页首页首页首页首页 </div> <div v-show="cur == 1"> 广场广场广场广场广场广场广场广场广场广场广场 </div> <div v-show="cur == 2"> 我的我的我的我的我的我的我的我的我的我的 </div> </div> </div> </template> <script> export default { data(){ return { cur:0 } } } </script>
当我们选项卡增多的时候,代码量也会增大,所以我们可以使用v-for来优化一下代码:
<template> <div class="box"> <div class="tab"> <span v-for="(item,index) of tab" :key="index" @click="cur = index">{{item}}</span> </div> <div class="content"> <div v-for="(item,index) of content" :key="index" v-show="cur == index">{{item}}</div> </div> </div> </template> <script> export default { data(){ return { tab:["首页","广场","我的"], content:[ "首页首页首页首页首页首页首页首页首页首页", "广场广场广场广场广场广场广场广场广场广场广场", "我的我的我的我的我的我的我的我的我的我的" ], cur:0 } } } </script>