0
点赞
收藏
分享

微信扫一扫

vue 表单 单选 切换样式

兔八哥软件爱分享 2023-01-03 阅读 55


vue 表单 单选 切换样式_ci

<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>

 

举报

相关推荐

0 条评论