<template>
<div class="flex flex-wrap">
<div class="w-full">
<ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='home'" :class="{'text-cyan-600 bg-white': currentTab!=='home' , 'text-white bg-cyan-600': currentTab=='home'}">
خانه
</a>
</li>
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='profile'" :class="{'text-cyan-600 bg-white': currentTab!=='profile' , 'text-white bg-cyan-600': currentTab=='profile'}">
پروفایل
</a>
</li>
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='setting'" :class="{'text-cyan-600 bg-white': currentTab!=='setting' , 'text-white bg-cyan-600': currentTab=='setting'}">
تنظیمات
</a>
</li>
</ul>
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
<div class="px-4 py-5 flex-auto">
<div class="tab-content tab-space">
<div v-if="currentTab='home' " :class="{'hidden': currentTab !== 'home', 'block': currentTab == 'home'}">
<p>
تولید محتوای خانه
</p>
</div>
<div v-else-if="currentTab='profile' " :class="{'hidden': currentTab !== 'profile', 'block': currentTab =='profile'}">
<p>
تولید محتوای پروفایل
</p>
</div>
<div v-else :class="{'hidden': currentTab !=='setting', 'block': currentTab == 'setting'}">
<p>
تولید محتوای تنظیمات
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "pink-tabs",
data() {
return {
currentTab: 'home'
}
},
methods: {
}
}
</script>
سلام دوستان اگر امکانش هست در دیباک گردن این کدها به من کمک کنید
ممنونم
اولین نفری باشید که به این پرسش کمک میکند و مسیر حل مشکل را باز میکند.
اولین پاسخ را بنویسیدشاید پاسخ شما همینجا باشد