vue两个单选框代码小例子

第一种情况

HTML部分

<template>
    <div class="affirmOrder">
        <ul>
            <li v-for="(i,index) in select" @click="addClassName(index)" :class="{active:index == thatnum}">
               <p>
                   <img :src="i.img" alt="" class="first">
                   <img :src="i.active" alt="" class="last">
                   <span>{{i.text}}</span>
               </p>
            </li>
        </ul>
    </div>
<template>
           

js部分

<script>
import shitang1 from "../assets/shitang1.png";
import shouti1 from "../assets/shouti1.png";
import waimai1 from "../assets/waimai1.png";
import shitang from "../assets/shitang.png";
import shouti from "../assets/shouti.png";
import waimai from "../assets/waimai.png";

export default {
  data() {
    return {
      select: [
        { text: "堂食", active: shitang1, img: shitang },
        { text: "外带", active: shouti1, img: shouti },
        { text: "外送", active: waimai1, img: waimai }
      ],
        thatnum: 0,
        }
    },
    methods:{
        addClassName: function(index) {
          //是否选择外卖
          this.thatnum = index;
          if (index == 2) {
            this.paymentWay="微信支付"
            this.shade=true
            this.$store.commit("setindexing", index);
            this.address = true;
            var selectAddress = this.$store.state.app.selectAddress;
            if (selectAddress != null) {
              this.isChoice = false;
              this.information = true;
              this.displayAddress = selectAddress.poAddress;
              this.displayName = selectAddress.dlUser;
              this.displayPhone = selectAddress.dlPhone;
            } else {
              this.isChoice = true;
              this.information = false;
            }
          } else {
            this.address = false;
            this.shade=false
          }
        },
        }

}
</script>

<style scoped>
.last {
  display: none;
}
.active .first {
  display: none;
}
.active .last {
  display: block;
  float: left;
}
</style>
           

第二种情况

<template>
<section class="showPlay" v-if="ChoicePlay">
    <section class="close" @click="on()"></section>
    <section class="content">
        <p>选择支付方式
            <img @click="on()" src="../assets/guan.png">
        </p>
        <ul>
            <li v-for="(item,index) in zhifu" @click="addImg(index,item)" :class="{select:index == thatnum}">
                <img :src="item.tuimg"/>
                <div>{{item.text}}<img :src="item.img"/></div>
            </li>
         </ul>
         <section class="shade" v-if="shade"></section>
     </section>
</section>

</template>

<script>


export default {
  data() {
    return {
            ChoicePlay:false,
            zhifu:[
                { text: "微信支付", active: dui, img: dui,tuimg:wei},
                { text: "支付宝支付", active: dui, img: dui1,tuimg:zhi},
                { text: "线下支付", active: dui, img: dui1,tuimg:zai },
            ],
            thatnum: 0,
            shade:false,
        }
    },
    methods:{
        on:function(){
            this.ChoicePlay=false;
        },
        addImg:function(index,item){//选择支付方式
            this.zhifu.forEach(li => {
                li.img=dui1;
            });
            item.img = dui;
            this.paymentWay = item.text;
            if(this.paymentWay=="线下支付"){
                this.ImmediatePayment=false
                this.placeOrder=true
            }else{
                this.ImmediatePayment=true
                this.placeOrder=false
            }
            this.ChoicePlay=false
        },
    },

}
</script>

<style scoped>
.showPlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,0.5)
}
.close{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
}
.content{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    background: #fff;
}
.content .shade{
    position: absolute;
    top: 11rem;
    left: 0;
    width: 100%;
    height: 4rem;
    background: #fff;
}
.content p{
    text-align: center;
    font-size: 16px;
    line-height: 3.5rem;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.content p img{
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
}
.content ul li{
    width: 100%;
    height: 3.5rem;
}
.content ul li img{
    margin: 0.6rem  1rem;
    float: left;
}
.content ul li div{
    float: right;
    width: 80%;
    height: 3.5rem;
    line-height: 3.5rem;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    position: relative;
}
.content ul li div img{
    position: absolute;
    top: 0;
    right: 0;
}
</style>