vue 表单单选切换样式

雨点打透心脏的1/2处 2023-06-25 08:12 18阅读 0赞

![20191227132228127.png][]

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

[20191227132228127.png]: https://img-blog.csdnimg.cn/20191227132228127.png

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关表单界面：改变单选框和复选框的样式

单选框效果： ![在这里插入图片描述][20190926105836468.gif] 单选框的样式是不可改变的，实际上的改变样式只是寻找别的东西来替换单选框。

曾经终败给现在/ 2023年08月17日 15:23/ 0 赞/ 158 阅读

相关 vue 表单单选切换样式

![20191227132228127.png][] <div class="form_input"> <span>性别</span>

雨点打透心脏的1/2处/ 2023年06月25日 08:12/ 0 赞/ 19 阅读

相关基于Vue实现active点击切换样式

1. html <footer class="footer" id="footer"> <div class="item" v-for="(item,

朱雀/ 2023年06月14日 04:17/ 0 赞/ 177 阅读

相关 javafx 样式表_如何在两个JavaFX样式表之间切换

javafx 样式表 JavaFX CSS示例程序 ( JavaFX CSS Example Program ) This example code of a [

怼烎@/ 2022年12月07日 12:07/ 0 赞/ 219 阅读

相关 vue 动态切换列表active样式

<template v-for="index of 10"> <div :key="index" :class="{ 'acti

╰半夏微凉°/ 2022年11月18日 13:53/ 0 赞/ 276 阅读

相关 tab 切换样式

![20210722193233170.png][] <ul> <li v-for="(item, index) in titleList0" :

秒速五厘米/ 2022年08月31日 04:42/ 0 赞/ 249 阅读

相关 Checkbox选框样式

drawable文件夹下定义selector\_checkbox.xml样式文件 <?xml version="1.0" encoding="utf-8"?>

电玩女神/ 2022年06月02日 02:40/ 0 赞/ 288 阅读

相关 layui表单单选框，多选框，下拉框等弹窗用layer弹窗时不显示

声明一下就可以了： ![SouthEast][] [SouthEast]: /images/20220601/a7fac498c888456bab740007516f467

怼烎@/ 2022年06月01日 03:53/ 0 赞/ 258 阅读

相关 vue样式绑定切换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中样式绑定</title> <

我会带着你远行/ 2022年05月25日 13:07/ 0 赞/ 291 阅读

相关 vue 点击事件切换样式和样式参数值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1

清疚/ 2022年03月08日 10:48/ 0 赞/ 291 阅读