Vue 编译错误: 组件模板应该只包含一个根元素

根据报错信息，组件模板应该只包含一个根元素。如果在多个元素上使用了 v-if 指令，请使用 v-else-if 将它们链接起来。

错误的示例代码如下：

<template>
  <div>
    <input class="price" type="number" placeholder="输入金额" v-model="info.money"/>
  
    <view class="line line1">
      <view class="line1-title">使用ZJT</view>
      <switch :checked="info.useQt!=0" color="#0E7519" style="transform:scale(0.7)" @change="onChangeQtCoupon"/>
    </view>
  
    <!-- 微信-->
    <view ref="weixin" class="line" v-if="this.source === 'WeiXIN'" @click="()=>onChoicePayWay('2')">
      <view class="line2-title">微信</view>
      <view v-if="info.payWay == 2" class="choiced">已选择</view>
      <view v-if="this.source === 'WeiXIN'" class="choiced">已选择</view>
    </view>
  
    <!-- 支付宝-->
    <view class="line" v-if="this.source === 'Alipay'" @click="()=>onChoicePayWay('1')">
      <view class="line3-title">支付宝</view>
      <view v-if="info.payWay == 1" class="choiced">已选择</view>
    </view>
  
    <!-- 底部-->
    <view class="bottom">
      <span>待支付：<label class="price-red">￥{{getToPayPrice()}}</label></span>
      <span>抵扣：{{info.couponMoney}}</span>
      <button class="btn-pay" @click="onPay">去支付</button>
    </view>
  </div>
</template>

修正后的示例代码如下：

<template>
  <div>
    <input class="price" type="number" placeholder="输入金额" v-model="info.money"/>
  
    <view class="line line1">
      <view class="line1-title">使用ZJT</view>
      <switch :checked="info.useQt!=0" color="#0E7519" style="transform:scale(0.7)" @change="onChangeQtCoupon"/>
    </view>
  
    <!-- 微信-->
    <view ref="weixin" class="line" v-if="this.source === 'WeiXIN'" @click="()=>onChoicePayWay('2')">
      <view class="line2-title">微信</view>
      <view v-if="info.payWay == 2" class="choiced">已选择</view>
      <view v-else-if="this.source === 'WeiXIN'" class="choiced">已选择</view>
    </view>
  
    <!-- 支付宝-->
    <view class="line" v-if="this.source === 'Alipay'" @click="()=>onChoicePayWay('1')">
      <view class="line3-title">支付宝</view>
      <view v-if="info.payWay == 1" class="choiced">已选择</view>
    </view>
  
    <!-- 底部-->
    <view class="bottom">
      <span>待支付：<label class="price-red">￥{{getToPayPrice()}}</label></span>
      <span>抵扣：{{info.couponMoney}}</span>
      <button class="btn-pay" @click="onPay">去支付</button>
    </view>
  </div>
</template>

修正后的代码中，使用了 v-else-if 来链接多个 v-if 指令。这样就可以保证模板只有一个根元素。