vue點擊切換支付方式的時候下面的footer里文字和顏色發(fā)生相應的變化
效果已經(jīng)實現(xiàn)，使用的是computed實現(xiàn)，分別計算顏色和文字屬性，想請教大家有沒有什么更好的方法，
第一次使用vue開發(fā)，想學一下大家的思路，謝謝

<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>發(fā)貨倉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>