灏天阁

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

· Yin灏

伪元素动态改变其样式

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

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

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

然后在 css 中：

对伪元素使用 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…

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

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

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

要是还不行的话，我就会[…xxx]，今天就是刚不行一个，如下：

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

- Book Lists -