【vue例子】利用vue实现单选框或者多选框

最新推荐文章于 2024-05-08 13:15:46 发布

简单Janeee

最新推荐文章于 2024-05-08 13:15:46 发布

阅读量4.1k

点赞数

分类专栏： vue例子文章标签： vue.js

本文链接：https://blog.csdn.net/liqiannan8023/article/details/128472176

版权

vue例子专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选、多选、全选</title>
</head>

<body>
    <div id="app">
        <table>
            <tr>
                <th>
                    <!-- 这是全选复选框（即选中了这个复选框，所有选项复选框都被选中），其绑定数据的v-model为checkedAll，并绑定了改变事件changeAllChecked -->
                    <input type="checkbox" v-model="checkedAll" @change="changeAllChecked()" />
                </th>
                <th>全选</th>
            </tr>
            <tr v-for="item in checkedAttr">
                <td><input type="checkbox" :value="item" v-model="checkedItem" /></td>
                <td>{{item}}</td>
            </tr>
          
        </table>


    </div>

    <!-- 这里需要引入自己的vue.js文件 -->
    <script src="js/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            //js

            data() {
                return {
                    checkedAll: false,
                    // 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空
                    checkedItem: [],
                    // 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框
                    checkedAttr: ["1", "2", "3", "4"],

                };
            },
            methods: {
                // 全选复选框状态改变监听事件
                changeAllChecked() {
                    // 判断全选复选框是否选中
                    if (this.checkedAll) {
                        // 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框
                        this.checkedItem = this.checkedAttr;
                    } else {
                        // 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框
                        this.checkedItem = [];
                    }
                },

            },
            watch: {
                // 监听复选框项是否全部选中，如果checkedItem发生改变，那么这个函数就会执行
                //监听器的作用
                checkedItem() {
                    if (this.checkedItem.length == this.checkedAttr.length) {
                        // 如果所有复选框项全部被选中,则全选复选框也被勾选
                        this.checkedAll = true;
                    } else {
                        // 否则复选框不勾选
                        this.checkedAll = false;
                    }
                },
            },



        })

    </script>
</body>

</html>

简单Janeee

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
【vue例子】利用vue实现单选框或者多选框

/ 监听复选框项是否全部选中，如果checkedItem发生改变，那么这个函数就会执行。// 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空。// 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框。// 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框。// 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框。// 如果所有复选框项全部被选中,则全选复选框也被勾选。// 全选复选框状态改变监听事件。// 判断全选复选框是否选中。
复制链接

扫一扫