标签：default content style upload exp nbsp 图片 gif 参数
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>
标签：default content style upload exp nbsp 图片 gif 参数
原文地址：https://www.cnblogs.com/maxiaocang/p/11847852.html
