1. In the SRC /views directory, create the order_details_simple/order_details_simple.vue directory and components

order_details_simple.vue:

<! -- Simple RadioGroup example --> <template> <div> <VNavbar></VNavbar> < A-card style="width:800px;"
            class="main">

      <a-radio-group @change="paymentWayOnChange"
                     :defaultValue="1"> <! --> <div class="panel-A">
          <p>
            <a-radio :value="1"</a-radio> </p> <div class="panel-A-Child"
               v-show="paymentWayValue == 1">
            <a-row>
              <a-col :span="8"> User type: </a-col> < A-col :span="16"> <! -- RadioGroup --> <a-radio-group :options="userOptions"
                               @change="userOnChange"
                               :defaultValue="userValue" />
              </a-col>
            </a-row>
            <a-row v-show="isBankCardShow">
              <a-col :span="8"> Card type: </a-col> < A-col :span="16"> <! -- RadioGroup --> <a-radio-group :options="bankCardOptions"
                               @change="bankCardOnChange"
                               :defaultValue="bankCardValue"/> </a-col> </a-row> </div> </div> <! -- quick payment --> <div class="panel-B">
          <p>
            <a-radio :value="2"> Quick payment </a-radio> </p> <div class="panel-B-Child"
               v-show="paymentWayValue == 2"> this is panel-B-Child </div> </div> <! --> <div class="panel-C">
          <p>
            <a-radio :value="3"</p> </div> <! Wechat pay --> <div class="panel-D">
          <p>
            <a-radio :value="4"</a-radio> </p> </div> </a-radio-group> </a-card> </div> </template> <script> // user type const userOptions = ['Individual User'.'Enterprise Users'// const bankCardOptions = ['Cash card'.'Credit Card/debit Card']
export default {
  name: 'order_details_simple'.data () {
    return {
      paymentWayValue: '1', // Payment method userOptions, // user type bankCardOptions, // card type userValue:'Individual User'// User type The default value is'Individual User'
      bankCardValue: 'Cash card'// Bank card type The default value is'Cash card'
      isBankCardShow: true}}, methods: {paymentWayOnChange (e) {console.log()'radio checked', e.target.value) // Only v-show // If 2 is selected, 2 is quick payment, set value to 2 //if (e.target.value == 1) {
      //   this.paymentWayValue = 1
      // } else if (e.target.value == 2) {
      //   this.paymentWayValue = 2
      // } else if (e.target.value == 3) {
      //   this.paymentWayValue = 3
      // } else if(e.target.value == 4) {// this.paymentWayValue = 4 //} // Can use switchcase
      switch (e.target.value) {
        case 1:
          this.paymentWayValue = 1
          break
        case 2:
          this.paymentWayValue = 2
          break
        case 3:
          this.paymentWayValue = 3
          break
        case 4:
          this.paymentWayValue = 4
          break}}, // User type userOnChange (e) {console.log(e.target.value) // When user type is selected'Enterprise Users'Hidden card type // ternary: this.isBankCardShow = e.target.value =='Enterprise Users' ? false : truethis.isBankCardShow = e.target.value ! = ='Enterprise Users'}, // bankCardOnChange (e) {console.log(e.target.value)}}} </script> <style lang="less" scoped>
.main {
  margin: 20px auto;
}
.ant-row {
  margin-bottom: 10px;
}
.panel-A {
  width: 700px;
}
</style>

Copy the code

2. The figure

3. Pay attention to the point

The default for Radio is:

<a-radio-group @change="paymentWayOnChange" :defaultValue="1" >
    <a-radio :value="1"</a-radio> <a-radio :value="2"> </a-radio> <a-radio :value="3"< p style = "max-width: 100%; clear: both"4"</a-radio> </a-radio-group>Copy the code

Add :defaultValue=”1″ and you have the default checked.

If you add v-model=”value”, or v-Model =”paymentWayValue”, the default selection will fail.

4. Detailed version

Reference 5.

Ant Design Vue website