vue中的單選框選中值

vue中的單選框選中值和最後傳給背景值不一樣：這句話的意思是如果我選擇男女，顯示的也是男女，但是我I需要給背景的就是id。可能男的id=0，女的id=1；

這時我們應該怎麼辦呢？

去個最基礎的例子

<div id="example-4" class="demo">

<input type="radio" id="one" value="One" v-model="picked">

<label for="one">One

</label>

<br>

<input type="radio" id="two" value="Two" v-model="picked">

<label for="two">Two

</label>

<br>

<span>Picked: {{ picked }}

</span>

</div>

data{

return {

      picked:' ',

  }

}

--------------------最後picked是你選擇的那個單選框的value，也就是one或者two 。

是以我們知道最後選中的也就是這個單選框的value值，并把這個值賦給了他綁定的 v-model的那個元素

上面是所有的單選都寫出來，如果是循環呢？

下面是選中快遞擷取選中的哪一項的id值。并且快遞名字也是顯示出來的。

選擇快遞方式

            <form class="mui-input-group change" >

                    <div class="mui-input-row mui-radio"   v-for="db in send">

                        <label>{{db.e_name}}</label>

                        <input name="radio1" type="radio" v-model="express.id" :value="db.id"@tap="express.e_name=db.e_name">  <!--//綠色的一定要，否則你隻是改變了id的值輸出的是讓express.id=db.id，但是顯示的你那個id對應的名字啊-->

                    </div>

           </form>

下面顯示你選擇的快遞方式：

<div>快遞方式

      <a class="mui-pull-right mui-navigate-right">

               <p style="padding-right:20px;color:#000;line-height: 40px;">{{express.e_name}}</p>

      </a>

</div>

 this.$api("Bsfamily/order",).then(db=>{        

                this.send=db.express;

//              沒有擷取到id說明不是從那個選擇快遞方式頁面選中回來的,就先指派

                if(!this.express.id){

                this.express.id= db.express[0].id;//預設的選中第一個

                this.express.e_name= db.express[0].e_name;

                }