vue功能基础元素使用

4.:inline="true"元素,能够左右元素保持在同一行

这个好处非常直观,但要注意和el-col同时使用时,就会出现el-input换行,即便调整好,放大缩小也会出现换行问题。

5.filterable 下拉框带搜索功能

6.clearable下拉框带搜索功能再加清除按钮

上面这个下拉框如果要加清除功能,就可以用这个

7.@keyup.enter 完成输入后按下回车执行动作

例如系统登录页面可以使用该事件,当输入账号和密码后,无需点击登录按钮,直接在输入密码以后回车完成登录,以增加用户体验

@keyup在element-ui组件中失效。这是因为element-ui组件在原生组件的基础上进行了封装。如想使用@keyup则需要加上native关键词,即@keyup.enter.native。

扩展:

事件代码

事件描述

@keyup.enter

回车按键松开

@keyup.left

左键按键松开

@keyup.right

右键按键松开

@keyup.up

上键按键松开

@keyup.down

下键按键松开

@keyup.delete

删除键松开

8.按钮样式 type="primary"

9.icon="xxx"    icon图标设计

10.   :gutter  和  :span实现元素的网格布局。使用Element U框架中的e+row和e+col组件来实现网格布局。其中el-row表示行,elcol表示列,:guter="10"表示列与列之间的间距为10px,:span="1.5"表示该列占据父元素宽度的1.5分之一。如果想要在该列中添加内容,可以在e+col标签中添加相应的内容即可。

<el-row :gutter="10" class="mb8"><el-col :span="1.5">

13.border表格顶格线

14.序号可以根据分页参数计算出来​编辑

      <el-table-column label="序号" type="index" align="center" width="55"><template slot-scope="scope"><span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span></template></el-table-column>

16.元素对其汇总align="left"  align="right"  align="center"

说明

left

左对齐。

center

居中对齐。

right

右对齐。

justify

均等对齐。有些浏览器不支持。

char

指定字符对齐。

<img>、<textarea>、<select>、<iframe>、<applet>、<embed>、<object>、<fieldset>(※)等矩形内联元素的 align 属性,可以设定该元素与周围文本的位置关系。

位置

说明

top

H2/e2/N2。与同一行里最高的文字或图像的上端对齐。

texttop

e2/N2。与同一行里最高的文字(不包括图像)的上端对齐。

center

e2/N2。和 middle 效果相同。不过一般用来做横向居中对齐。

middle

H2/e2/N2。在 HTML4.01 里,middle可以把图像的中央对齐同一行的文字(不包括图像)的基本线。各浏览器的显示效果有差异。

absmiddle

e2/N2。把图像的中央对齐同一行的文字的最高点与最低点的中线。

与 baseline 效果相同。

bottom

H2/e2/N2。与 baseline 效果相同。

baseline

e2/N2。把图像的下端对齐同一行的文字(不包括图像)的基本线。

absbottom

e2/N2。把图像的下端对齐同一行的文字或图像的下端。

left

H3/e2/N2。图像居左,使右边可以显示文字。解除此效果请用 

 标签的 clear 属性。

right

H3/e2/N2。图像居右,使左边可以显示文字。解除此效果请用 

 标签的 clear 属性。

※ <fieldset> 是块元素,但是align属性的效果类似内联元素。

20.:visible.sync实现弹框的动态显示和隐藏

本文介绍了Vue.js中利用:visible.sync实现弹框的动态显示和隐藏,

.sync的作用,经常用来关联子组件和父组件之间的值绑定,它允许双向绑定并同步更新可见性。

1、:visible指的是属性绑定,表示弹框的显示隐藏,当:visible的值为ture的时候,弹框显示,当为false的时候,弹框隐藏

后面的.sync是什么意思呢,指的就是同步动态双向的来表示visible的值,当我们关闭窗口的时候,这个弹框隐藏了,visible的值发生了变化,但是关闭窗口这个动作,我们没法用确定的动作去判断这个值,所以用到了vue中的双向绑定的原则,在vue中统一加上了.sync来表示同步的修改了visible的值。例如标签

2、对于自定义指令 v-loading,只需要绑定 Boolean即可,默认情况下,loading遮罩会插入到绑定元素的子节点通过添加 body修饰符,可以使遮罩插入至DOM中的body上。v-loading使用(来自官网介绍)

3、 cell-style:单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。

4、Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性。判断自身属性是否存在

5、for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。

for in得到对对象的key或数组,字符串的下标

sync官网资料:https://cn.vuejs.org/api/reactivity-core.html#watcheffect

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp 购物弹窗组件 (微信小程序)

效果图&#xff0c;暂时只适应单规格&#xff0c;居中弹出和下方弹出&#xff0c;如需求不满足&#xff0c;请自行修改代码 &#xff08;更新于24/11/15) 居中显示效果 下方弹出效果 html <template><view class"" v-if"show":class"mod…

单片机学习笔记 5. 数码管静态显示

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~ 目录 0、实现的功能 1、Keil工程 1-1 数码管显示原理 1-2 静态与动态显示 1-3 74HC573锁存器的工作原理 1-…

内容占位符:Kinetic Loader HTML+CSS 使用CSS制作三角形原理

内容占位符 前言 随着我们对HTML和CSS3的学习逐渐深入&#xff0c;相信大家都已经掌握了网页制作的基础知识&#xff0c;包括如何使用HTML标记构建网页结构&#xff0c;以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能&#xff0c;今天我们一起来完成一个有趣且实…

【YOLOv8】安卓端部署-1-项目介绍

【YOLOv8】安卓端部署-1-项目介绍 1 什么是YOLOv81.1 YOLOv8 的主要特性1.2 YOLOv8分割模型1.2.1 YOLACT实例分割算法之计算掩码1.2.1.1 YOLACT 的掩码原型与最终的掩码的关系1.2.1.2 插值时的目标检测中提取的物体特征1.2.1.3 coefficients&#xff08;系数&#xff09;作用1.…

Hadoop 学习心得

一、引言 &#xff08;一&#xff09;学习 Hadoop 的背景和目的 随着信息技术的飞速发展&#xff0c;数据量呈爆炸式增长&#xff0c;传统的数据处理方式已难以满足需求。在这样的背景下&#xff0c;为了能够在大数据领域有所发展&#xff0c;我开始学习 Hadoop。Hadoop 作为处…

【全面解读】Apache SeaTunnel常见问题全攻略

使用SeaTunnel需要安装Spark或者Flink这样的引擎么&#xff1f; 不需要&#xff0c;SeaTunnel 支持 Zeta、Spark 和 Flink 作为同步引擎的选择&#xff0c;您可以选择之一就行&#xff0c;社区尤其推荐使用 Zeta 这种专为同步场景打造的新一代超高性能同步引擎。Zeta 被社区用…

STM32完全学习——系统时钟设置

一、时钟框图的解读 首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟&#xff0c;由于内部HSI存在较大的误差&#xff0c;因此我们在系统完成上电初始化&#xff0c;之后需要将STM32的时钟切换到外部HSE作为系统时钟&#xff0c;那么我…

分布式系统稳定性建设-性能优化篇

分布式系统稳定性建设-性能优化篇 系统稳定性建设是系统工程的核心内容之一。以下是一些重要的方面: 架构设计: 采用模块化、松耦合的架构设计,以提高系统的可扩展性和可维护性。合理划分系统功能模块,降低单个模块的复杂度。定义清晰的接口和数据交换标准,确保各模块之间协调…

网络学习第四篇

引言&#xff1a; 我们在第三篇的时候出现了错误&#xff0c;我们要就行排错&#xff0c;那么我们要知道一下怎么配置静态路由实现ping通&#xff0c;这样子我们才知道下一跳到底是什么&#xff0c;为什么这样子做。 实验目的 理解和掌握静态路由的基本概念和配置方法。 实…

[控制理论]—位置式PID与增量式PID

位置式PID与增量式PID 1.位置式PID 按模拟PID控制算法&#xff0c;以一系列的采样时刻点kT代表连续时间t&#xff0c;以矩形法数值积分近似代替积分&#xff0c;以一阶后向差分近似代替微分&#xff0c;即&#xff1a; t ≈ k T &#xff08; k 0 , 1 , 2... &#xff09; …

【c++丨STL】list的使用

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C、STL 目录 前言 list简介 一、list的默认成员函数 构造函数(constructor) 析构函数 赋值重载 二、list的迭代器接口 迭代器的功能分类 三、list的容量…

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色,类似材质丢失

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色&#xff0c;类似材质丢失 Addressable Play Mode Script加载模式 选择 Use Existiing Build 1.Unity 切换到 PC 平台&#xff0c;执行 Addressable Build 运行&#xff0c;加载 bundle 内的预制体 显示正常 2.Unit…

单片机学习笔记 6. 数码管动态显示

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示 目录 0、实现的功能 1、Keil工程 1-1 数码管动态显示 1-2 数组的定义与引用…

车企如何实现安全图纸外发管理

车企面临着日益增长的数据交换需求&#xff0c;尤其是设计图纸等敏感数据的外发管理。如何确保这些数据在传输过程中的安全性和效率&#xff0c;是车企急需解决的问题。我们将从几个关键性的因素上来分析一下怎么实现安全图纸外发管理。 统一管理与授权 采用专业的文件交换系统…

第7章 硬件测试-7.1 硬件调试

第7章 硬件测试 7.1 硬件调试7.1.1 电路检查7.1.2 电源调试7.1.3 时钟调试7.1.4 主芯片及外围小系统调试7.1.5 存储器件和串口外设调试7.1.6 其他功能模块调试 测试是每项成功产品的必经环节。硬件测试是评估产品质量的重要方法&#xff0c;产品质量是公司的信誉和品牌象征&…

Qt5/QPainter/画家

目录 1.绘制文字 1.1案例 1.2代码 2.画线 2.1案例 2.2代码 3.绘制矩形 3.1代码 4.绘制椭圆和圆 4.1椭圆 4.2圆 5.圆弧 5.1案例: 5.2代码 6.扇形 6.1案例 6.2代码: 7.更改绘画的颜色和粗细 7.1案例 ​编辑 7.2代码 1.绘制文字 1.1案例 通过三种不同的绘…

一篇保姆式centos/unbantu安装docker

前言&#xff1a; 本章节分别演示centos虚拟机&#xff0c;unbantu虚拟机进行安装docker。 上一篇介绍&#xff1a;docker一键部署springboot项目 一&#xff1a;centos 1.卸载旧版本 yum remove docker docker-client docker-client-latest docker-common docker-latest do…

fetch API和XHR

文章目录 一、基本写法1. XMLHttpRequest&#xff08;XHR&#xff09;2. Fetch API 二、兼容性1. XMLHttpRequest&#xff08;XHR&#xff09;2. Fetch API 三、Promise支持1. XMLHttpRequest&#xff08;XHR&#xff09;2. Fetch API 四、请求响应1. XMLHttpRequest&#xff0…

Photoshop(PS)——人像磨皮

1.新建一个文件&#xff0c;背景为白色&#xff0c;将图片素材放入文件中 2.利用CtrlJ 复制两个图层出来&#xff0c;选择第一个拷贝图层&#xff0c;选择滤镜---杂色---蒙尘与划痕 3.调整一下数值&#xff0c;大概能够模糊痘印痘坑&#xff0c;点击确定。 4.然后选择拷贝2图层…

Elasticsearch retrievers 通常与 Elasticsearch 8.16.0 一起正式发布!

作者&#xff1a;来自 Elastic Panagiotis Bailis Elasticsearch 检索器经过了重大改进&#xff0c;现在可供所有人使用。了解其架构和用例。 在这篇博文中&#xff0c;我们将再次深入探讨检索器&#xff08;retrievers&#xff09;。我们已经在之前的博文中讨论过它们&#xf…