element-ui checkbox 组件源码分享

简单分享 checkbox 组件,主要从以下三个方面来分享:

1、组件的页面结构

2、组件的属性

3、组件的方法

一、组件的页面结构

二、组件的属性

2.1 value / v-model 属性,绑定的值,类型 string / number / boolean,无默认值。

首先讨论单个 checkbox,通过 props 接收 父组件传递过来的 value,在组件内部通过计算属性 model 监听 value 的变化,并将最新值双向绑定到页面当中进行渲染,具体如下:

2.2 label 属性,选中状态的值,类型 string / number / boolean,无默认值。

2.3 true-label、false-label 属性,选中的值,类型 string / number,无默认值。

属性的使用及实现效果如下:

2.4 disabled 属性,是否禁用,类型 boolean,默认 false。

2.5 border 属性,是否有边框,类型 boolean,默认 false。

2.6 size 属性,尺寸大小,类型 medium / small / mini,无默认值。

2.7 name 属性,原生 name 属性,类型 string,无默认值。

2.8 checked 属性,是否勾选,类型 boolean,默认 false。

2.9 indeterminate 属性,设置 indeterminate 状态,只负责样式控制,类型 boolean,默认 false。

属性的使用及实现效果如下:

通过上面效果知,此属性的主要作用是设置 checkbox 的全选、半选状态。

三、组件的方法

3.1 change 方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/496985.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

46.continue语句

目录 一.continue语句 二.视频教程 一.continue语句 continue语句的作用和break语句很像&#xff0c;break语句会跳出当前循环&#xff0c;而continue语句则是跳出本次循环&#xff0c;继续执行下一次循环。 举个例子&#xff1a; #include <stdio.h>void main(void)…

想学网络安全,从哪里开始?网络安全的学习路线

网络安全学习路线&#xff1a; 想学习网络安全专业的知识&#xff0c;想当黑客&#xff0c;但是不知道该从哪里开始学。 我给你一个路线&#xff01; 清晰图片和大纲&#xff1a;https://docs.qq.com/doc/DU1lpVFpSbWVrd2p3

【每周精选资讯 | 第 1 期】2024-03-11 ~ 2024-03-17

前言 大家好&#xff0c;我是翼同学。这里是【每周精选资讯】的第一期内容。 GPT 递给我苹果 Figure展示了与OpenAI合作的最新进展&#xff0c;通过结合先进的神经网络&#xff0c;使机器人能够执行类似人类的快速、灵巧动作。主要功能包括描述周围环境、常识推理、将高层次…

Android ImageView以及实现截图

实现效果 截图前 截图后 代码 package cn.jj.huaweiad;import android.annotation.SuppressLint; import android.graphics.Bitmap; import android.os.Bundle; import android.os.Handler; import android.util.Log; import android.view.View; import android.view.ViewGro…

螺旋矩阵的算法刷题

螺旋矩阵的算法刷题 本文主要涉及螺旋矩阵的算法 包括三个题目分别是 59. 螺旋矩阵 II54. 螺旋矩阵 中等LCR 146. 螺旋遍历二维数组 文章目录 螺旋矩阵的算法刷题一 、螺旋矩阵简单1.1 实现一&#xff08;我认为这个方法更巧妙&#xff01;&#xff01;&#xff09;1.2 实现二&…

Redis入门到实战-第十七弹

Redis实战热身t-digest篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、消息代理…

2024最新华为OD机试试题库全 -【二叉树计算】- C卷

1. 🌈题目详情 1.1 ⚠️题目 给出一个二叉树如下图所示: 请由该二叉树生成一个新的二叉树,它满足其树中的每个节点将包含原始树中的左子树和右子树的和。 左子树表示该节点左侧叶子节点为根节点的一颗新树;右子树表示该节点右侧叶子节点为根节点的一颗新树。 1.2 �…

自养号测评,补单的五大关键要素

现在很多大卖都是自己管理几百个账号&#xff0c;交给服务商不是特别靠谱 第一 你不知道服务商账号质量怎么样 第二 账号一天下了多少你也不清楚&#xff0c;如果下了很多单万一封号被关联了怎么办 第三 你也不知道服务商用什么卡给你下单&#xff0c;用一些低汇率和黑卡下单…

运用开关量信号远程传输装置实现工厂智能化技改需要分几步走

DTD509H系列开关量信号无线传输器由一个无线信号发射终端和一个无线信号接收终端组成&#xff0c;也可以根据用户现场实现一点对多点或者多点对一点的无线控制。DTD509H系列开关量信号无线传输器可与PLC的IO端口、继电器、二次仪表、传感器等工业设备配套使用&#xff0c;运用无…

【前端Vue】社交信息头条项目完整笔记第2篇:二、登录注册,准备【附代码文档】

社交媒体-信息头条项目完整开发笔记完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;一、项目初始化使用 Vue CLI 创建项目,加入 Git 版本管理,调整初始目录结构,导入图标素材,引入 Vant 组件库,移动端 REM 适配,关于 , 配置文件,封装请求模块。十、用户关…

快速上手Spring Cloud 十四:璀璨物联网之路

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

Java项目:78 springboot学生宿舍管理系统的设计与开发

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统的角色&#xff1a;管理员、宿管、学生 管理员管理宿管员&#xff0c;管理学生&#xff0c;修改密码&#xff0c;维护个人信息。 宿管员管理公寓…

iOS - Runtime-API

文章目录 iOS - Runtime-API1. Runtime应用1.1 字典转模型1.2 替换方法实现1.3 利用关联对象给分类添加属性1.4 利用消息转发机制&#xff0c;解决方法找不到的异常问题 2. Runtime-API2.1 Runtime API01 – 类2.1.1 动态创建一个类&#xff08;参数&#xff1a;父类&#xff0…

轻松赚钱,精彩生活:上班族副业赚钱新攻略大揭秘!

薪水总是捉襟见肘&#xff0c;每月账单总让人倍感压力。你是否曾在静谧的夜晚&#xff0c;躺在床上&#xff0c;思索如何为家庭多赚一分钱&#xff1f;其实&#xff0c;你并不孤单。在这个充满机遇与挑战的时代&#xff0c;越来越多的人开始寻找副业&#xff0c;以期望让生活更…

Appium设备交互API

设备交互API指的是操作设备系统中的一些固有功能&#xff0c;而非被测程序的功能&#xff0c;例如模拟来电&#xff0c;模拟发送短信&#xff0c;设置网络&#xff0c;切换横竖屏&#xff0c;APP操作&#xff0c;打开通知栏&#xff0c;录屏等。 模拟来电 make_gsm_call(phon…

八数码问题

八数码难题 题目描述 在 3 3 3\times 3 33 的棋盘上&#xff0c;摆有八个棋子&#xff0c;每个棋子上标有 1 1 1 至 8 8 8 的某一数字。棋盘中留有一个空格&#xff0c;空格用 0 0 0 来表示。空格周围的棋子可以移到空格中。要求解的问题是&#xff1a;给出一种初始布局…

Java项目:79 springboot海滨体育馆管理系统的设计与实现

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 体育馆管理系统主要实现了管理员功能模块和学生功能模块两大部分 管理员功能模块&#xff1a; 管理员登录后可对系统进行全面管理操作&#…

内网穿透_ICMP_icmpsh

目录 一、ICMP协议详解 二、ICMP隧道 (一) 为什么会使用ICMP (二) 实验环境 (三) 操作流程 1. 下载icmpsh 2. 下载并安装依赖 3. 关闭本地icmp响应 4. 攻击机启动服务端开始监听 5. 靶机启动工具客户端 6. 攻击机接受到靶机传来的数据 三、郑重声明 一、ICMP协议详…

LeetCode_1.两数之和

一、题目描述 二、方法 1.方法1&#xff08;暴力枚举法&#xff09; 利用两个for循环&#xff0c;对数组进行逐一的遍历&#xff0c;直到找到两个数的和为目标值时返回这两个数的下标。以下为c实现的完整代码。 # include<iostream> using namespace std; #include<…

C语言分支循环语句详解

分支和循环语句是什么 在我们写程序的时候&#xff0c;总会遇到想一直循环执行某种语句的时候&#xff0c;这时候我们就要使用一种语句叫循环语句&#xff0c;或者带一些判断条件的语句&#xff0c;在C语言中提供了像这些的循环语句和分支语句 if else 语句 这是一种判断语句…