vue 默认选中复选框案例

最新推荐文章于 2024-01-19 13:59:42 发布

FF_Chen

最新推荐文章于 2024-01-19 13:59:42 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/FF_Chen/article/details/107583789

vue 专栏收录该内容

7 篇文章

订阅专栏

本文展示了一个使用Vue.js实现的简单网页示例，其中包括复选框与下拉框的双向数据绑定。通过v-model指令，用户的选择能够实时更新到数据模型中，反之亦然。该示例还展示了如何使用Vue的数据响应机制来更新页面显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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