vue 默认选中复选框案例

最新推荐文章于 2025-04-02 10:58:41 发布

FF_Chen

最新推荐文章于 2025-04-02 10:58:41 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue checkbox

本文链接：https://blog.youkuaiyun.com/FF_Chen/article/details/107583789

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 500px;
            margin: 50px auto;
            padding: 15px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="main">
        <label v-for="item in lableArr">
            <input type="checkbox" :value="item.id" v-model="checkboxValue"/>
            {{item.value}}
            <br/>
        </label>
        <p>选中结果：{{checkboxValue}}</p>
        <label v-for="item1 in lableArr1">
            <input type="checkbox" :value="item1" v-model="checkboxValue1"/>
            {{item1}}
            <br/>
        </label>
        <p>选中结果：{{checkboxValue1}}</p>

<select v-model="selected">
    <option disabled value="">请选择</option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
  </select>
<span>Selected: {{ selected }}</span>


    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        var vueMain = new Vue({
            el: '.main',
            data: {
                lableArr: [
                    {id:1, value:'篮球'},
                    {id:2, value:'足球'},
                    {id:3, value:'网球'},
                    {id:4, value:'排球'},
                    {id:5, value:'羽毛球'}
                ],
                lableArr1: ['篮球', '足球', '网球', '排球', '羽毛球'],
                checkboxValue: [1,3,5],
                checkboxValue1: ['篮球', '足球', '网球'],
                selected: ''
            }
        })
    </script>
</body>
</html>