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

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>
  1. css部分(随意布局了一下…)
input {
            display: block;
            margin-top: 10px;
        }
  1. 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. 创建全局组件
//1. 创建组件的模板
<template id='info'>
    <div>
      <img src='./images/fm.jpg'>
      <p>我是描述信息</p>
    </div>
  </template>
// 2. 注册组件
  Vue.component('abc', {
      template: "#info"
    });
// 3. 使用组件
<abc></abc>
  1. 创建局部组件
//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>的复习

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