v-model 结合 radio、checkbox 类型使用

最新推荐文章于 2022-08-03 17:07:45 发布

莫余

最新推荐文章于 2022-08-03 17:07:45 发布

阅读量218

点赞数

分类专栏：凌晨3:40的Vue 文章标签： vue checkbox

本文链接：https://blog.csdn.net/qq_44824148/article/details/112801311

版权

凌晨3:40的Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

radio（单选按钮）

input 绑 lable 标签

可通过name属性来实现条件互斥
也可通过v-model来实现条件互斥

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <label for="male">
            <input type="radio" value="男" v-model="gender" id="male">男
        </label>
        <label for="female">
            <input type="radio" value="女" v-model="gender" id="female">女
        </label>
        <p>您的选择是:{{gender}}</p>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                gender: '',
            },
        })
    </script>
</body>

</html>

checkbox（复选框）

复选框分为两种情况

单个勾选框
多个勾选框

单个勾选框

v-model 即为布尔值，此时input的value并不影响v-model的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>您选择的是: {{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isAgree: false
            },
            methods: {

            }
        })
    </script>
</body>

</html>

多个复选框

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div id="app">
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        <h2>您的爱好是: {{hobbies}}</h2>

        
    </div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                isAgree: false, // 单选框
                hobbies: [], // 多选框,
                originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
            }
        })
    </script>

</body>

</html>

值绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <div id="app">
<label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                isAgree: false, // 单选框
                hobbies: [], // 多选框,
                originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
            }
        })
    </script>

</body>

</html>