通过css实现简单的radio美化及radio在vue中的使用取值

将一个标签绝对定位覆盖在input标签（input标签透明处理可以防止遮挡遗漏）上，通过input[type="radio"]:checked+标签名实现选中和未选中区别。

radio在Vue中的单应用

HTML：

<ul class="name">

<!--其他结构代码-->

<li>
<p>是否参加张裕130周年庆定向拍摄邀请</p>

<!--可以这样-->
<label>
<input type="radio" v-model="selectVal" value="是" @change="radioVal">
<span></span>是
</label>
<label>
<input type="radio" v-model="selectVal" value="否" @change="radioVal">
<span></span>否
</label>

<!--也可以这样-->
<label v-for="(radio,index) in selectData" :key="index">
<input type="radio" v-model="selectVal" :value="radio" @change="radioVal">
<span></span>
{{radio}}
</label>



<i>定向邀请活动介绍</i>
</li>

<!--其他结构代码-->

</ul>

CSS:

/*其他css样式*/

.name li label{margin-right:2rem;position:relative;}
.name li label input[type="radio"]{opacity:0;margin-right:1rem;}
.name li label span{display:block;position:absolute;left:0;top:0;width:2rem;height:2rem;border:0.1rem solid #8f6646;border-radius:2rem;background:transparent;}
.name li label input[type="radio"]:checked+span{background:#8f6646;}
.name li label input[type="radio"]:checked+span:after{content:"";display:block;width:100%;height:100%;box-sizing:border-box;border:0.3rem solid #fcf8ea;border-radius:2rem;}

/*其他css样式*/

JS:

data(){
  return{
    selectVal:"是",//是否参与拍摄
    selectData:["是","否"], //是否参与拍摄用户选择数据
  }
},
methods: {
  //是否参与拍摄选择
  radioVal() {
    console.log(this.selectVal)
  },
}

radio在Vue中多应用

HTML:

<!--其他HTML结构代码-->



<tr v-for="(list,index) in perData" :key="index">
<td>{{list.promotion}}</td>
<td>{{list.name}}</td>
<td>{{list.position}}</td>
<td>
<label v-for="(radio,id) in selectData" :key="id" @change="radioVal(list.id,radio.checked,index)">
<input type="radio" :value="radio.checked" v-model="list.checked">
<span></span>
{{radio.text}}
</label>
</td>
</tr>

<!--
<input type="radio" :value="radio.checked" v-model="list.checked">
perData数据中会自动添加checked键及值
在radioVal方法中可以console出来
-->




<!--其他HTML结构代码-->

js:

data(){
  return{

    //其他数据

    selectData:[{checked:1,text:"是"},{checked:-1,text:"否"}],//是否同意数据
    perData: [
      { id: 0, name: "王某某", position: "工程师", promotion: "副高级" },
      { id: 1, name: "张某某", position: "工程师", promotion: "副高级" },
      { id: 2, name: "田某某", position: "工程师", promotion: "副高级" },
      { id: 3, name: "李某某", position: "工程师", promotion: "副高级" },
      { id: 4, name: "赵某某", position: "工程师", promotion: "副高级" },
    ],//候选人数据

    //其他数据

  }
},
methods: {

  //其他方法

  //获取是否同意
  radioVal(event, checked, index) {
    console.log(event, checked,index)
    console.log(this.perData)
    //this.$set(this.vote_user_ids,index,event);//将选中数据set到指定数组中
    //this.$set(this.vote_results,index,checked);//将选中数据set到指定数组中
    //this.vote_results.push(checked);//将选中数据push到指定数组中
    //this.vote_user_ids.push(event);//将选中数据push到指定数组中
    //console.log(this.vote_user_ids)
    //console.log(this.vote_results);
  },

  //其他方法

}