首页 > 其他分享> > vue实现全选框效果

vue实现全选框效果

2022-02-03 21:03:38 作者：互联网

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

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
                        }
                    },
                    methods: {
                        allCheck(e) {
                            // isAll代表是否为全选
                            this.isAll = !this.isAll
                            let list = this.$refs.one
                            if (this.isAll) {
                                // 如果是全选的话，给每一个子元素的checked属性设置为true
                                for (let i = 0; i < list.length; i++) {
                                    list[i].checked = true
                                }
                                // num用来计数，表示当前子元素有几个被选中
                                this.num = this.times
                            } else {
                                // 如果不是全选的话，给每一个子元素的checked属性设置为false
                                for (let i = 0; i < list.length; i++) {
                                    list[i].checked = false
                                }
                                this.num = 0
                            }
                        },
                        click1(e) {
                            if (e.target.checked) {
                                // 如果当前元素被选中，那么num++
                                this.num++
                            } else {
                                // 有一个没有被选中的话，那么就说明不是全选，就设置this.isAll为false
                                this.num--
                                this.isAll = false
                            }
                            if (this.num == this.times) {
                                this.isAll = true
                            }
                        }
                    },
                    watch: {
                        isAll(newValue) {
                            if (newValue) {
                                this.$refs.all.checked = true
                            } else {
                                this.$refs.all.checked = false
                            }
                        }
                    }

4. 自我总结

本来觉得只是一个简简单单的小组件功能，结果自己写的时候真的出现了各种问题，这里记录一下：
（1） mdn引入vue的时候，创建组件的问题

平时基本上都用vue-cli来创建组件，只需在xx.vue里面定义好组件直接暴露出去导入使用就可以了，但是现在，需要利用vue的template模板创建组件，然后注册组件，引用组件，我基本上都忘光了

创建全局组件

//1. 创建组件的模板
<template id='info'>
    <div>
      <img src='./images/fm.jpg'>
      <p>我是描述信息</p>
    </div>
  </template>
// 2. 注册组件
  Vue.component('abc', {
      template: "#info"
    });
// 3. 使用组件
<abc></abc>

创建局部组件

//1. 创建组件的模板（和上面一样）
//2. 在vue实例的components属性里面注册组件 
et vue = new Vue({
            el: '#app1',
            data: {
                name: '王雨欣'
            },
            components: {
                'abc': {
                    template: '#info'
                }
            }
        });
// 3. 使用组件

（2）组件的命名问题

刚开始的时候我给全选框组件命名的是checkBox驼峰命名，但是使用的时候也是用来驼峰命名，结果报了这样的错： Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option

vue的命名规范如下（组件名，数据，方法名）：

1.1 注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"，官方推荐的组件名是每个单词首字母大写（PascalCase）或者全小写用 - 连接（kebab-case）。在DOM中使用的时候，改为全小写，单词之间用 - 连接。
例如: 注册时: myFather -> 使用时: my-father

1.2 在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"
例如: 传递时: parent-name=“name” -> 接收时: props: [“parentName”]

1.3 在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"
@parent-say=“say” -> this.$emit(“parent-say”);

（3）v-for的渲染问题：

v-for可以可以遍历数组, 字符, 数字, 对象，用以渲染界面
可以通过ref取得v-for渲染的所有dom对象，会返回一个数组

（4）对<input type=checkbox>的复习

radio是单选框(一个主题的选项必须指定一样的name属性),checkbox是复选框，同一个主题的复选框选项不会互斥，name也可以不同

// 还有value属性：指定input的值。如果省略，获取该元素的值的结果为字符串"on"。
<form action="http://vip.biancheng.net/register.php" method="post" name="formName">
     爱好：<input type="checkbox" name="running" checked>跑步
     <input type="checkbox" name="reading" checked>阅读
     <input type="checkbox" name="shopping" checked>购物
</form>

(5) e.target.check
如何设置复选框元素是否被选中，只需要设置
e.target.check=true/false
获取一个元素的属性可以直接把元素看成一个对象，元素的属性看做是对象的属性
eg:

 let input = document.getElementById('read')
    console.log(input.name); //reading
     console.log(input.checkd); //false

标签：vue,false,效果,num,全选,组件,isAll,选框
来源： https://blog.csdn.net/darabiuz/article/details/122778361