vue功能基础元素使用

ops/2024/11/20 18:06:48/

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.ppmy.cn/ops/135291.html

相关文章

JSONP处理跨域请求

JSONP 背景 由于浏览器存在安全策略&#xff0c;所以当访问的请求中的协议、域名、端口其中一个与本站不同时就会形成跨域&#xff0c;这里介绍一种比较简单的方案——jsonp。 原理 浏览器对 script、img这些带有src属性的的标签在发送请求时是不会触发跨域的校验&#xff…

tcp的网络惊群问题

1. SO_REUSEPORT 可以解决epoll的惊群问题 但是&#xff0c;现在的 TCP Server&#xff0c;一般都是 多进程多路IO复用(epoll) 的并发模型&#xff0c;比如我们常用的 nginx 。如果使用 epoll 去监听 accept socket fd 的读事件&#xff0c;当有新连接建立时&#xff0c;所有进…

时序数据基础TDEngine

时序数据基础 什么是时序数据&#xff1f;​ 时序数据&#xff0c;即时间序列数据&#xff08;Time-Series Data&#xff09;&#xff0c;它们是一组按照时间发生先后顺序进行排列的序列数据。日常生活中&#xff0c;设备、传感器采集的数据就是时序数据&#xff0c;证券交易…

数据结构(单向链表——c语言实现)

链式存储的优缺点&#xff1a; 优点&#xff1a; 1、动态分配内存&#xff1a; 链式存储不需要在数据插入之前分配固定大小的数组或内存块&#xff0c;因此它更适合存储动态变化的数据 2、高效的插入和删除操作&#xff1a; 在链表中插入或删除元素只需要调整相邻节点的指…

前端注册代码

代码 <template><el-card class"register" style"max-width: 480px ; background-color: aliceblue;"><template #header><div class"card-header"><span>注册</span></div></template><el…

网络编程-002-UDP通信

1.UDP通信的简单介绍 1.1不需要通信握手,无需维持连接,网络带宽需求较小,而实时性要求高 1.2 包大小有限制,不发大于路径MTU的数据包 1.3容易丢包 1.4 可以实现一对多,多对多 2.客户端与服务端=发送端与接收端 代码框架 收数据方一般都是客户端/接收端 3.头文件 #i…

【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构

Android Studio 版本 Android Java MVP 模式 参考 模型层 model public class User {private String email;private String password;public User(String email, String password) {this.email = email;this.password = password;}public String getEmail() {return email;}…

单片机的基本组成与工作原理

单片机&#xff08;Microcontroller Unit, MCU&#xff09;是一种将计算机的主要部分集成在一个芯片上的小型计算机系统。它通常包括中央处理器&#xff08;CPU&#xff09;、存储器&#xff08;Memory&#xff09;、输入输出接口&#xff08;I/O Ports&#xff09;、定时器/计…