需求:页面中的单选框需要有这样的效果。
1、单选按钮组是保持原有的只可以选中一个单选按钮。
2、如果一个单选按钮是选中状态,当再次点击这个单选按钮时,选中状态就会取消。
代码:
html:
<el-radio-group class=“drawer-radio” v-model=“pmInfo.menopause” @change=“changeMenopause”>
<el-radio :label=“1” @click.native.prevent=“handleChangeitem(1)”>是
<el-radio :label=“0” @click.native.prevent=“handleChangeitem(0)”>否
vue
data:{
pmInfo:{
menopause:"",
},
},
methods:{
handleChangeitem (e) {
console.log(“v-model绑定的值:”+this.pmInfo.menopause,“传进来的值”+e)
e === this.pmInfo.menopause ? this.pmInfo.menopause = ‘’ : this.pmInfo.menopause = e
},
}
代码解释:
针对同一个单选按钮。
第一次: 绑定的值为空,点击,传入的值与绑定的data值不相等,所以=>this.pmInfo.menopause = e。选中
第二次:再点击,传入的值与绑定的值相同,将绑定的data值设置为空。取消选中
第三次:点击,绑定的值为空,传入的值与绑定的值不同。将传入的值设置为绑定的值。选中