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;
                }

           });

感谢分享http://blog.csdn.net/qq_33769914/article/details/73485438

单选框
<div class="radio">
  <form>
      <label  v-for="(item,index) in question_item.cand_item"><input v-model="checkedValue" class="border_w" type="radio" name="Q3"  :value="index"/>{{item.text}}</label> 
  </form>
</div>

//checkedValue的值就是选中的值，我们只需要实时监控他的值就可以了
export default {
        name:'radio',
        data(){
            return {
                checkedValue:'',
                answer:[],
            }
        },
    watch:{
            checkedValue:function(){
                this.answer=[];
                this.answer.push(this.checkedValue);
            }
        },
}

多选框

<div class="checkbox">
 <form>
    <label   v-for="(item,index) in question_item.cand_item"><input class="border_w" type="checkbox" :value="index" v-model="checkedValue"/>{{item.text}} </label> 
 </form>
</div>

export default {
        name:'checkbox',
        data(){
            return {
                checkedValue:[],//一定必须是数组不能是字符串
                answer:[],
            }
        },
  watch:{
        checkedValue:function(new_v,old_v){
            this.answer=this.checkedValue;
        }
    },
}