vue computed使用问题

Question

vue点击切换支付方式的时候下面的footer里文字和颜色发生相应的变化
效果已经实现，使用的是computed实现，分别计算颜色和文字属性，想请教大家有没有什么更好的方法，
第一次使用vue开发，想学一下大家的思路，谢谢

<template lang="html">
  <div class="pay">
    <mt-header fixed title="订单支付">
      <div slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </div>
    </mt-header>
    <div class="pay-order">
      <ul>
        <li>
          <div>共1笔订单</div>
          <div>订单总金额<span class="amount">¥ 622.00</span> </div>
        </li>
        <li v-if="payDetail">
          <div style="height:200px"></div>
        </li>
        <li>
          <div>发货仓1 运费总计：5.00</div>
        </li>
      </ul>
      <div class="show-more"><span @click="showPayDetail">显示订单明细<i class="iconfont" v-bind:class="{ 'icon-caret-down' : classFlag, 'icon-caret-up': !classFlag}"></i></span></div>
    </div>
    <div class="pay-way">
      <div class="pay-way-item">
        <div class="title">余额支付</div>
        <div class="content">
          <div class="cell">
            <div class="flex">
              <div class="pay-to"><img src="https://dummyimage.com/25x25/ff6600/wechat.png" alt=""> <span>激想云商余额支付</span></div>
              <div>
                <span class="mint-checkbox">
                   <input type="radio"  v-model="payWayIndex" class="mint-checkbox-input" id="wallet" value="0"> 
                     <label for="wallet" class="mint-checkbox-core"></label>
                </span>
              </div>
            </div>
            <div class="wallet">
              余额：<span class="amount">¥0.00</span> <span class="empty">余额不足？</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pay-way-item">
        <div class="title">更多快捷支付方式</div>
        <div class="content">
          <div class="cell">
            <div class="flex">
              <div class="pay-to"><img src="https://dummyimage.com/150x30/00B700/wechat.png" alt=""></div>
              <span class="mint-checkbox">
                   <input type="radio" v-model="payWayIndex"  class="mint-checkbox-input" id="wechat" value="1"> 
                   <label for="wechat" class="mint-checkbox-core"></label>
                </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="footer-result" :class="payclass">
        <p>{{paytext}}：<span></span>元</p>
      </div>
    </footer>
  </div>
</template>

<script>
  export default {
    components: {

    },
    data() {
      return {
        payDetail: false,
        classFlag: true,
        payWayIndex: 1,
        payWay: [{
          paytext: '余额支付',
          payclass: "wallet",
          value: 1,
        }, {
          paytext: '微信支付',
          payclass: "wechat",
          value: 2
        }]
      }
    },
    computed: {
      paytext() {
        let index = this.payWayIndex;
        return this.payWay[index].paytext
      },
      payclass() {
        let index = this.payWayIndex;
        return this.payWay[index].payclass
      }
    },
    methods: {
      showPayDetail() {
        //显示隐藏支付订单详情
        this.payDetail = !this.payDetail;
        //显示隐藏icon 样式
        this.classFlag = !this.classFlag;
      }

    }


  }

</script>

Answer 1

还可以使用watch监听，也可以直接在你的html那里写js语句

<div class="footer-result" :class="payWay[payWayIndex].payclass">
    <p>{{payWay[payWayIndex].paytext}}：<span></span>元</p>
</div>

Answer 2

点颜色和背景成组放进一个数组里面，点击第一项就用第一个的颜色和背景来改变按钮，点击第二个就用第二个；这样的话，还可以扩展更多，只要改变数组就好了