vue 监听单选按钮及三元表达式关联切换

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

因为我这里是修改了按钮的样式，原有的单选切换已经失效，所以通过这个方法进行性别的切换，有更好的方法可以评论我呀~