<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>
vue 表单 单选 切换样式
猜你喜欢
转载自blog.csdn.net/weixin_38404899/article/details/103730532
今日推荐
周排行