<label :style="{color:gender==='1'? 'blue':'black' }" for="gender1"> <input style="display: none" v-model="gender" value="1" id="gender1" type="radio"> <i class='iconfont icon-iconfont14'></i> 男 </label> <label :style="{color:gender==='2'? 'red':'black' }" for="gender2"> <input style="display: none" v-model="gender" value="2" id="gender2" type="radio"> <i class='iconfont icon-iconfont13'></i> 女 </label>
实现原理
- label标签的for值为对应的input标签的id——点击label标签时，便出发了radio的选中事件
- input的display为none——隐藏默认的单选样式
- :style 根据选中的值动态绑定选中的样式
