vue实现全选框效果

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

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

1. 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>

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

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

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

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