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

news2024/9/27 12:17:40

大厂面试题分享 面试题库

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

地址:前端面试题库

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

伪元素动态改变其样式


我们都用过伪元素,什么::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.coloradmin.cn/o/139928.html

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

相关文章

「诗人艺术家ll著名诗人」胭脂茉莉十四行诗10首

【诗人艺术家ll著名诗人】胭脂茉莉十四行10首胭脂茉莉诗人简介&#xff1a;胭脂茉莉&#xff0c;女&#xff0c;江苏人&#xff0c;年少习诗&#xff0c;作家、诗人。评论及随笔见诸媒体及报刊&#xff0c;诗歌被选编入海内外多种选本及刊物&#xff0c;其主要代表作有现代禅诗…

vue3-init

Vue3快速上手 1.Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;https://github.com/vuejs/vue-next/release…

maven中的scope

provided: 编译运行时期&#xff0c;目标容器已经提供&#xff0c;打jar包时候不带optional&#xff0c;依赖传递test: 举例子junit&#xff0c;为什么Test在src的java蓝包的测试类的方法上面不能用&#xff1f;src的java绿包里的测试类的方法上可以用。 依赖传递&#xff1a;间…

【数据篇】32 # 如何选择合适的方法对数据进行可视化处理?

说明 【跟月影学可视化】学习笔记。 从原始数据中过滤出有用的信息 下面通过航拍公园人群分布例子&#xff0c;按照某些属性对数据进行过滤&#xff0c;再将符合条件的结果展现出来。 数据来源&#xff1a;https://github.com/akira-cn/graphics/blob/master/data/park-peo…

Java on Azure Tooling 2022年12月更新|Azure SDK 参考书代码样例支持及用户体验提升

作者&#xff1a;Jialuo Gan - Program Manager, Developer Division at Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎回到12月的 Java on Azure Tooling 的更新。首先&#xff0c;提前祝大家新年快乐。在这次更新中&#xff0c;我们将介绍 Azure SDK 参考书的…

Linux系统之部署MxsDoc个人文件管理系统

Linux系统之部署MxsDoc个人文件管理系统一、MxsDoc介绍1.MxsDoc简介2.MxsDoc功能3.MxsDoc应用场景二、检查本地系统环境1.检查系统版本2.检查系统内核三、下载MxsDoc软件包1.创建软件目录2.下载MxsDoc软件3.查看下载软件四、部署MxsDoc1.解压MxsDoc软件包2.一键部署MxsDoc五、登…

【Linux逻辑卷管理】之pvcreate、pvdisplay和pvremove

文章目录一、逻辑卷管理(LVM)概念1. LVM 定义2. 物理卷(PV)3. 卷组(VG)4. 逻辑卷(LV)二、创建逻辑卷1. pvcreate命令将分区标记为物理卷&#xff0c;创建物理卷2. vgcreate命令将一个或多个物理卷结合为一个卷组&#xff0c;创建卷组3. lvcreate命令根据卷组中的可用物理区块,创…

【线上故障记录】MySQLTransactionRollbackException: Lock wait timeout exceeded

数据同学反馈凌晨1-2点会出现连接系统MySQL数据库等待锁超时 com.mysql.jdbc.exceptions.jdbc4.MySQLTransactionRollbackException: Lock wait timeout exceeded; try restarting transaction InnoDB事务等待一个行级锁的时间最长时间默认值是50秒&#xff08;单位是秒&#x…

尚硅谷_ShardingSphere5

ShardingSphere5第01章 高性能架构模式1、读写分离架构2、数据库分片架构2.1、垂直分片2.2、水平分片3、读写分离和数据分片架构4、实现方式4.1、程序代码封装4.2、中间件封装4.3、常用解决方案第02章 ShardingSphere1、简介2、ShardingSphere-JDBC3、ShardingSphere-Proxy第03…

tcping实用小工具

Tcping----实用小工具tcping命令详解 一、tcping介绍 tcping&#xff1a;tcping命令基于tcp协议监控&#xff0c;可以从较低级别的协议获得简单的&#xff0c;可能不可靠的数据报服务。 原则上&#xff0c;TCP应该能够在从容硬线连接到分组交换或电路交换网络的各种通信系统之…

DNS域名解析

文章目录一 定义二 配置文件三 DNS解析流程四 总结一 定义 用户在浏览器输入URL&#xff0c;浏览器就会向该URL对应的服务器发送请求&#xff0c;获得对应的IP&#xff0c;才能将资源返回给用户。 简单来说&#xff0c;DNS就是将URL转化成IP的过程。 二 配置文件 在Linux系统…

js逆向-Mytoken请求参数逆向

声明 本文仅供学习参考&#xff0c;如有侵权可私信本人删除&#xff0c;请勿用于其他途径&#xff0c;违者后果自负&#xff01; 如果觉得文章对你有所帮助&#xff0c;可以给博主点击关注和收藏哦&#xff01; 前言 目标网站&#xff1a;aHR0cHM6Ly93d3cubXl0b2tlbmNhcC5j…

数益工联 x TiDB丨如何运用 HTAP 挖掘工业数据价值?

制造业是一个古老而悠久的行业&#xff0c;它的起源最早可追溯到石器时代。从新石器时代简单的工具&#xff0c;到今天复杂的智能工厂&#xff0c;制造业历经千年发展&#xff0c;蜕变成了由技术驱动的创新行业&#xff0c;充满各种自动化流程、始终互连的设备和数据丰富的流程…

深度学习笔记(一)——什么是神经网络

生物学中的神经元的定义 神经元有很多种类&#xff0c;下图就是其中的一种&#xff0c;锥体神经元。它由三部分组成&#xff0c;分别是树突&#xff0c;胞体和轴突。树突是接受输入&#xff0c;轴突是用于输出的。神经元的树突在接收到特定的输入刺激后&#xff0c;其胞体就会被…

BGP在数据中心的应用5——BGP生命周期管理

注&#xff1a; 本文根据《BGP in the Datacenter》整理&#xff0c;有兴趣和英文阅读能力的朋友可以直接看原文&#xff1a;https://www.oreilly.com/library/view/bgp-in-the/9781491983416/上一部分笔记请参考&#xff1a;https://blog.csdn.net/tushanpeipei/article/deta…

腾讯前端vue面试题合集

能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗&#xff1f; &#xff08;1&#xff09;hash 模式的实现原理 早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单&#xff0c;location.hash 的值就是 URL 中 # 后面的内容。比如下面这…

简单易懂的Spring扩展点详细解析,看不懂你来打我

简单易懂的Spring扩展点原理&#xff0c;看不懂你来打我总览BeanFactoryPostprocessor作用回调时机原理BeanDefinitionRegistryPostProcessor作用例子&#xff1a;Spring对Configuration、ComponentScan、Component、Bean、Import等注解的处理回调时机原理ImportSelector作用例…

vue组件之间的数据传递

目录 组件之间的通信 1、组件之间的关系&#xff1a;父子关系、兄弟关系、跨级关系 2、父子组件之间的通信&#xff08;数据传递&#xff09;&#xff1a; 3、兄弟组件之间的通信&#xff08;数据传输&#xff09;&#xff1a; 4、跨级组件之间的通信&#xff1a;provide /…

SparkSQL 入门简介

在安装目录的bin目录打开spark-shell.cmd&#xff0c;输入如下&#xff0c;按tab健&#xff0c;查看可执行数据源 spark.read.在安装目录D:\spark-3.0.0-bin-hadoop3.2\bin\input新建user.json {"username":"chen","age":3} {"username&q…

vue全家桶-vuex(一)

vue全家桶-vuex&#xff08;一&#xff09;1.Vuex概述2.Vuex中的核心特性A.State1.this.$store.state.全局数据名称-组件访问State中的数据的第一种方式2.组件访问State中的数据的第二种方式&#xff1a;按需导入B.Mutation1.this.$store.commit是触发Mutation的第一种方式2.触…