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

我不是女神ヾ 2023-09-24 19:36 23阅读 0赞

### 前言 ###

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

### 伪元素动态改变其样式 ###

我们都用过伪元素，什么`::before`,`::after`啊这些等等，但是他们都不会直接在代码里html中生成标签，那么有时我们不行再加dom元素了，明明就用改dom元素的伪元素更简单，如下图：  
![在这里插入图片描述][4172d530757e495c88852054243ac923.png]

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

![在这里插入图片描述][13e2a059bda74b63a81515df9f3f686b.png]

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

然后在`css`中：  
![在这里插入图片描述][fbb6fa263a1446699e1c47dba997e976.png]  
对伪元素使用 var(–width)这种方式，就可以动态改变其属性啦~

### 简单却挺香的vue修饰符 ###

前提是vue框架下哈~

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

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

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

我举得这个例子是我觉得最常用的修饰符之一，想了解的小伙伴可以详细看下面的网址  
[blog.csdn.net/ganyingxie1…][blog.csdn.net_ganyingxie1]

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

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

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

要是还不行的话，我就会\[…xxx\]，今天就是刚不行一个，如下：  
![在这里插入图片描述][45587a089e794eb2a57e2d06b0b7495d.png]  
像这样转换下就可以，如果直接`this.modelList`进行遍历就不管用，必须用arr这种，我觉得跟这玩意是复杂数据类型有关，不能只改变他地址，要改变他本身

[4172d530757e495c88852054243ac923.png]: https://img-blog.csdnimg.cn/4172d530757e495c88852054243ac923.png
[13e2a059bda74b63a81515df9f3f686b.png]: https://img-blog.csdnimg.cn/13e2a059bda74b63a81515df9f3f686b.png
[fbb6fa263a1446699e1c47dba997e976.png]: https://img-blog.csdnimg.cn/fbb6fa263a1446699e1c47dba997e976.png
[blog.csdn.net_ganyingxie1]: https://blog.csdn.net/ganyingxie123456/article/details/79362212
[45587a089e794eb2a57e2d06b0b7495d.png]: https://img-blog.csdnimg.cn/45587a089e794eb2a57e2d06b0b7495d.png