表单控件绑定：checkbox表单绑定v-model

news2024/11/23 15:19:19

表单checkbox，绑定的v-model是一个布尔值，要么为true，要么为false；
因为它是勾选，或者不勾选的形式；
为true了就是勾选，为false了就是不勾选；

代码：

<body>
    <div id="box">
        <input type="checkbox" v-model="isRemember">记住用户名
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                isRemember:false
            }
        })
    </script>
</body>

结果：

对于checkbox多选值的绑定：

对于多选值的绑定，不能像上面那样，直接v-model是true或者false了，如果是这样的话，那就是三个都勾选，或者三个都不勾选，就实现不了自由多选的目的了；

如果说给每一个checkbox都加上不一样的v-model值，那数据多了呢，多冗余，也不好操作；

而且我们要返回前端勾选的数据给后端，要知道选择了哪些内容；

这时候我们就需要引入checkbox的value值；

<body>
    <div id="box">
        <h2>注册页面--兴趣爱好</h2>
        <input type="checkbox" v-model="checkList" value="vue">vue
        <input type="checkbox" v-model="checkList" value="react">react
        <input type="checkbox" v-model="checkList" value="wx">小程序
        <div>{{checkList}}</div>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                checkList:[]
            }
        })
    </script>
</body>

结果：

对于checkbox单选值的绑定：

只要保证v-model绑定的是同一个变量；
更改变量选择的value值；

<body>
    <div id="box">
        <h2>注册页面--性别选择</h2>
        <input type="radio" v-model="select" value="a">男
        <input type="radio" v-model="select" value="b">女
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                select:"a"
            }
        })
    </script>
</body>

结果：