vue中的top栏的做法

大家好,我是大帅子,今天给大家讲一下vue中的top栏的做法,下面我们直接开始吧,

---

我们先可以设置一个变量等于对应的页面

 <!-- 按钮 -->
    <div class="niu">
      <span @click="flag = 'mianji'" :class="{ active: flag === 'mianji' }"
        >面积</span
      >
      <span @click="flag = 'progress'" :class="{ active: flag === 'progress' }"
        >进度</span
      >
      <span @click="flag = 'work'" :class="{ active: flag === 'work' }"
        >工作量</span
      >
      <span @click="flag = 'budget'" :class="{ active: flag === 'budget' }"
        >预算</span
      >
 </div>

然后我们可以一一对应的写上页面,最后在data定义一个对应的 默认值就好了

   <!-- 面积 -->
    <div class="right" v-if="flag === 'mianji'">
    </div>

    <!-- 进度 -->
    <div class="progress" v-if="flag === 'progress'">
    </div>

    <!-- 工作量 -->
    <div class="workloadl" v-if="flag === 'work'">
    </div>

    <!-- 预算 -->
    <div class="workloadl" v-if="flag === 'budget'">
    </div>
    
    
    <script>
            data(){
            return {
                flag: "mianji",
                }
            }
    </script>

最后我们开心的点点点了

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅        还需努力!大家一起进步!!!