vue 监听单选按钮及三元表达式关联切换
首次打开页面获取后端数据,自动勾选上用户上次已填好的选项。
先上代码 后解释~
<div class="set_form_box">
<p class="set_title">性别</p>
<div v-on:click="sexChecked(1)">
<input class="set_sex" type="radio" name="sex" value="1" title="男" v-bind:checked="isActive==1?isActive_active:false" sex_type="{$member.sex_type}">
<span></span>男
</div>
<div v-on:click="sexChecked(2)">
<input class="set_sex" type="radio" name="sex" value="2" title="女" v-bind:checked="isActive==1?false:isActive_active" sex_type="{$member.sex_type}">
<span style="margin-left: 2rem;"></span>女
</div>
</div>
此处的 {$member.sex_type} 为男女状态值,1为男 2为女
isActive 与 {$member.sex_type} 进行数据绑定,方便下一步切换选项
三元表达式: v-bind:checked=" isActive == 1 ? isActive_active : false "
此处: ‘ isActive_active ’ true 为选中 false 为未选中
以上完成默认值填充,下一步处理点击切换男女选项
添加一个 sexChecked() 方法,sex_type 参数对应男女状态值
因为上面三元表达式已经写好,这里我们只需把 isActive 的状态值改变 就可以达到切换的效果啦
new Vue({
el:'#set_content',
data(){
return{
isActive:'{$member.sex_type}', //1为男 2为女
isActive_active:true, //true 为选中 false 为未选中
}
},
methods: {
sexChecked:function(sex_type){
let _this =this;
if (sex_type == 1) {
_this.isActive = 1;
}else if (sex_type == 2) {
_this.isActive = 2;
}
},
}
})
因为我这里是修改了按钮的样式,原有的单选切换已经失效,所以通过这个方法进行性别的切换,有更好的方法可以评论我呀~