意想不到的前端三个小妙招

news/2024/11/23 3:55:15/

大厂面试题分享 面试题库

前端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

整理下本人在工作中撸代码遇到的一些刚看时一脸懵逼,实则很简单就能解决的小妙招,希望对大家有所帮助哟~

伪元素动态改变其样式


我们都用过伪元素,什么::before,::after啊这些等等,但是他们都不会直接在代码里html中生成标签,那么有时我们不行再加dom元素了,明明就用改dom元素的伪元素更简单,如下图:

那个蓝色的进度条就是用动态改变伪元素样式的方式来实现的,那么接下来来看下具体实现方案吧!

在该dom元素中添加行内样式“--width”,当然我这里是要改变它的宽度,如果你们要变颜色啊啥的,自己根据需要起名字

然后在css中:

对伪元素使用 var(--width)这种方式,就可以动态改变其属性啦~

简单却挺香的vue修饰符


前提是vue框架下哈~

大家开发中难免会遇到在当前页面中,点击某个按钮等之类的操作后,会在该页面弹出一个带着遮罩层的功能框,要求你点击遮罩层时,该功能框消失;与此同时,功能框中会自带功能点击按钮。那么问题来了,你点击该功能框中的功能按钮时,会先出发该点击事件,然后整个功能框就消失了,因为在你点击该功能框中的功能按钮时,会出现事件冒泡,那么我们如何特别简单的解决呢? 只需要.stop,如下代码,在HTML中:

<div class="mask"@click="handleClickMask"> //这是遮罩层<divclass="content-box"><Button @click.stop="handleClickButton">点我</Button></div>
</div>
复制代码

是滴,你没看错,只需要这个.stop,即可~

我举得这个例子是我觉得最常用的修饰符之一,想了解的小伙伴可以详细看下面的网址

blog.csdn.net/ganyingxie1…

vue中数据修改后,页面没更新


当你觉得你改了数据了,特别是数组那种比较复杂的数据类型,但是页面渲染没有更新,此时你是不是在怀疑,“嗯?说好的数据双向绑定呢?骗人呢?”

我每次遇到这个就会先 this.nextTick(() =>{})试一波,要是还不知道这个方法的友友们,自己去搜下吧,铁定刚入前端坑没多久哇~

要是还不行的话,我就会[...xxx],今天就是刚不行一个,如下:

像这样转换下就可以,如果直接this.modelList进行遍历就不管用,必须用arr这种,我觉得跟这玩意是复杂数据类型有关,不能只改变他地址,要改变他本身

大厂面试题分享 面试题库

前端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库


http://www.ppmy.cn/news/319845.html

相关文章

学计算机用x260可以吗,联想X260电脑健盘使用方法

如果您有还原软件或自带的还原&#xff0c;还原一下系统有效又省事。 你想想出事前你是怎么操作的&#xff1f;故障不会无缘无故的出现吧&#xff1f;将出事前下载所有东西全部卸载&#xff0c;在不可以&#xff0c;还原系统或重装&#xff0c;如果是硬件的问题就修修去&#x…

thinkpad卡在logo界面_win10系统开机卡在开机Thinkpad LoGo画面的恢复教程

win10系统使用久了&#xff0c;好多网友反馈说win10系统开机卡在开机Thinkpad LoGo画面的问题&#xff0c;非常不方便。有什么办法可以永久解决win10系统开机卡在开机Thinkpad LoGo画面的问题&#xff0c;面对win10系统开机卡在开机Thinkpad LoGo画面的图文步骤非常简单&#x…

Hackintosh 黑苹果安装 基于Thinkpad x201(i5-560M,集显) Legacy Boot Mode安装macOS 10.14 Mojave

Hackintosh 黑苹果安装 基于Thinkpad x201(i5-560M,集显) Legacy Boot Mode安装macOS 10.14 Mojave 一、准备工作 、启动U盘制作&#xff08;在Mac或者Mac虚拟机上制作&#xff0c;我在windows上制作的启动盘都失败了&#xff0c;不知道是什么原因&#xff09; 找一个16G 空U…

联想ThinkServer RS260服务器静音降噪改造及CentOS拷机测试

联想ThinkServer RS260是1u超薄,体积比较小;服务器原有的侧吹风扇属于增压暴力风扇,噪音巨大,导致服务器在家用环境下难以使用;本次拷机的主要目的是,在对散热配置进行了静音降噪的改造后,通过测试来确认散热性能仍然是充足的,以确保ThinkServer可以在家中安静的使用。…

联想服务器重装系统u盘启动不了怎么办,联想thinkpad无法进入u盘启动怎么办?

原标题:联想thinkpad无法进入u盘启动怎么办? 联想ThinkPad电脑是一款性能十分不错的电脑,相信有很多朋友都在是使用。而最近就有联想ThinkPad的使用者,因为工作需要将电脑重装为win7系统的时候,选择使用u盘来重装系统,却出现了无法进入u盘启动的情况。 使用u盘重装系统呢…

联想服务器 带外管理系统,联想服务器存储成就“数图”海量应用

项目背景 数字图书馆(Digital Library)是用数字技术处理和存储各种图文并茂文献的图书馆&#xff0c;实质上是一种多媒体制作的分布式信息系统。数字图书馆的建立将使人们在任何时间和地点通过网络获取所需的信息变为现实&#xff0c;大大地促进资源的共享与利用。 “数字图书馆…

联想万全t260磁盘阵列_配置信息和测试平台介绍

配置信息和测试平台介绍 五、配置信息和测试环境 配置信息&#xff1a; 联想万全T260 G2服务器 外形/高度 塔式/5U 处理器 Intel Xeon E5504 2.0GHz 处理器数量/最高 1/2 L2缓存 4x256KB L3缓存 4MB 芯片组 Intel 5500ICH10R 内存/最大 2*1GB ECC DDR3/16GB 内存插槽 8个DIMM插…

联想服务器怎么安装linux虚拟机,ThinkServer RS260安装CentOS操作实录

硬件:联想ThinkServer RS260 E3 1220V6 安装U盘:2个 一、制作EasyStartup启动盘、CentOS启动盘 (1) 制作EasyStartup启动盘 在没有EasyStartup启动光盘的情况下, 可从联想网站,找到驱动程序与服务的网页,找到相关下载地址(http://support.lenovo.com.cn/lenovo/wsi/Module…