点击不同按钮显示不同的组件

点击不同按钮显示不同的组件

主要使用change事件调用方法,来保存当前所在按钮的value,再在组件中使用v-show来判断是否该显示组件

示例:

<el-radio-group v-model="tabPosition"
                      @change="handleClick"
                      style="margin-bottom: 30px;"
                      class="navRadio"
                      fill='#d4237a'>
        <el-radio-button label="card" >会员办卡</el-radio-button>
        <el-radio-button label="charge">会员充值</el-radio-button>
        <el-radio-button label="combo">购买套餐</el-radio-button>
        <el-radio-button label="add">追加套餐</el-radio-button>
      </el-radio-group>
data(){
    return{
      showRecord: 'card',     //用来保存当前所在按钮位置
      tabPosition: 'card',    //初始按钮位置
    }
  },
  methods:{
    handleClick(value) {
      console.log(value);
      this.showRecord = value
    },
<!--  通过showRecord来保存目前所在卡片的位置,从而判断该显示哪个组件  -->
    //这些都是子组件
    <cardRecord ref="card" v-show="showRecord === 'card'"></cardRecord>
    <recharge ref="charge" v-show="showRecord === 'charge'" ></recharge>
    <combo ref="combo" v-show="showRecord === 'combo'" ></combo>

不同页面调用不同组件,效果如图:

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值