子组件

最新推荐文章于 2023-12-01 20:32:51 发布

代码敲着敲着就睡了

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量88

点赞数

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49261425/article/details/112763023

版权

VUE 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

<div class="row">
        <div class="options">
          <div class="">
            <div
              v-for="(item, index) in oDiv"
              :key="index"
              @click="s(item.name)"
              :class="{ active: active == item.name }"
            >
              {{ item.name }}
            </div>
          </div>
          <component :is="currentTabComponent"></component>
        </div>
</div>

import burse from "@/view/personalCenter/burse.vue";
import collect from "@/view/personalCenter/collect.vue";
import coupon from "@/view/personalCenter/coupon.vue";
import dynamic from "@/view/personalCenter/dynamic.vue";
import enjoy from "@/view/personalCenter/enjoy.vue";
import indent from "@/view/personalCenter/indent.vue";

export default {
    name: 'personage',
    components: { burse,collect,coupon,dynamic,enjoy,indent},
    data(){
        return{
          //头像上传
          imageUrl:require("@/assets/img/personalCenter/photo.png"),
          //修改昵称
          input: '这是我的昵称',
          //手机号
          input1:'123****1234',
          //选项
          active: "我的订单",
          currentTabComponent: "indent",
          oDiv: [
            {
              name: "我的订单",
            },
            {
              name: "我的钱包",
            },
            {
              name: "我的收藏",
            },
            {
              name: "我的动态",
            },
            {
              name: "优惠券",
            },
            {
              name: "猜你喜欢",
            },
          ],
          
        }
    },
    methods:{
        s(data) {
          this.active = data;
          switch (data) {
            case "我的订单":
              this.currentTabComponent = "indent";
              break;
            case "我的钱包":
              this.currentTabComponent = "burse";
              break;
            case "我的收藏":
              this.currentTabComponent = "collect";
              break;
            case "我的动态":
              this.currentTabComponent = "dynamic";
              break;
            case "优惠券":
              this.currentTabComponent = "coupon";
              break;
            case "猜你喜欢":
              this.currentTabComponent = "enjoy";
            break;
          }
        },
    }
}