vue 表单 单选 切换样式

<div class="form_input">
         <span>性别</span>
         <label class="sex sex1"  v-bind:class="{ active: isChoose1 }"><input name="sex" type="radio" value="m" v-model='selectStatus' @change="handle"/>男</label>
         <label class="sex"  v-bind:class="{ active: isChoose2 }"><input name="sex" type="radio" value="f" v-model='selectStatus' @change="handle"/>女</label>
</div>


<script>
export default {
  name: 'studentId',
  data () {
    return {
      name:"",
      selectStatus:"",
      isChoose1:false,
      isChoose2:true,
    }
  },
  methods: {
        handle(){
        // console.log("取到的值是"+this.selectStatus);
        if(this.selectStatus=='m'){
            this.isChoose1 = false;
            this.isChoose2 = true;
        }
        if(this.selectStatus=='f'){
            this.isChoose1 = true;
            this.isChoose2 = false;
        }
      },
  },
}
</script>

<style>
.sex1{
    margin-right: 1.6rem;
}
.sex{
    font-size: .7rem;
    font-weight: 600;
}
.sex input{
     opacity: 0;
}
.active{
    color:#ccc;
}
</style>