这篇文章主要介绍“有用的web前端技巧有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“有用的web前端技巧有哪些”文章能帮助大家解决问题。
伪元素动态改变其样式
我们都用过伪元素，什么::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，即可~
vue中数据修改后，页面没更新
当你觉得你改了数据了，特别是数组那种比较复杂的数据类型，但是页面渲染没有更新，此时你是不是在怀疑，“嗯？说好的数据双向绑定呢？骗人呢？”
我每次遇到这个就会先 this.nextTick(() =>{})试一波，要是还不知道这个方法的友友们，自己去搜下吧，铁定刚入前端坑没多久哇~
要是还不行的话，我就会[...xxx]，今天就是刚不行一个，如下：
像这样转换下就可以，如果直接this.modelList进行遍历就不管用，必须用arr这种，我觉得跟这玩意是复杂数据类型有关，不能只改变他地址，要改变他本身。
关于“有用的web前端技巧有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
