vue实现全选框效果

最新推荐文章于 2025-03-09 01:52:05 发布

望屿

最新推荐文章于 2025-03-09 01:52:05 发布

阅读量2.8k

点赞数 3

分类专栏：前端源码学习和手撕文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/darabiuz/article/details/122778361

版权

本文记录了使用Vue.js实现全选功能组件的过程，包括HTML结构、CSS样式和JavaScript逻辑。在实践中遇到的问题包括：组件创建与注册、命名规范、v-for渲染以及复选框操作。特别强调了Vue组件命名应遵循的短横线分隔命名规则，以及在DOM中使用组件时的注意事项。此外，还提及了v-for遍历对象和操作复选框选中状态的方法。

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

昨天看快手面经有这样一道题目，今天就试着来实现了一下

vue组件封装，写逻辑部分，css忽略。大概是：全选单选，就像购物车的全选按钮，五个商品五个按钮，一个全选按钮，点击全选，商品都选中，反之，商品都选中则全选按钮亮。

html部分

<template id="check">
        <div>
        // 表示全选框，定义全选点击事件
            <input type="checkbox" class="all_check" value="全选" @click='allCheck' ref="all">
        // 利用v-for渲染五个单选框，定义单选点击事件
            <input type="checkbox" class="one_check" @click='click1' v-for='value in times' ref="one" :key='value'>
        </div>
    </template>

css部分（随意布局了一下…）

input {
   
            display: block;
            margin-top: 10px;
        }

js逻辑部分代码
详细见注释

     data() {
   
                        return {
   
                            times: 5,
                            isAll: false,
                            num: 0,
                            ischeck: false
                        }

最低0.47元/天解锁文章