假装很6-优快云博客

原创 Vue 实现文本展开收起功能

先说说需求，以及实现的需求 1、移动端H5，发表留言后跳转到评论列表，超过5行文字，多余的需要隐藏，并且需要有展开/收起按钮 2、未超过5行的文字，不需要展示展开收起/按钮下面直接丢出核心代码 <div :ref="`community_${index}`" class="community-words" :class="{'more-line':item.domHeight > 300 && !item.open}" v-h

2020-08-25 17:55:49 3883

原创 js 中的隐士转换 + ==规则

ToString 1、数组中的null或undefined，会被当做空字符串处理 2、普通对象：转为字符串相当于直接使用Object.prototype.toString()，返回"[object Object]" ToNumber 1、null：转为0 2、数组/对象：数组首先会被转为原始类型，然后在根据转换后的原始类型按照对应规则处理 ToBoolean 1、js中的假值只有false、null、undefined、空字符、0和NaN，其它值转为布尔型都为true ToPrimitiv

2020-07-22 17:43:23 472

原创重绘和回流（重排）的区别和关系？

重绘和回流（重排）的区别和关系重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值回流必将引起重绘，而重绘不一...

2019-09-20 15:42:08 2292

原创浏览器的渲染过程，DOM 树和渲染树的区别

浏览器的渲染过程：解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js CSS 文件下载完成，开始构建 CSSOM(CSS 树) CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树) 布局(Layout)：计算出每个节点在屏幕中的位置显示(Painting)：通过显卡把页面画到屏幕上 DOM 树和渲染树的区别： DOM 树与...

2019-09-20 15:03:29 1328

原创 { parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }

在vue项目中，执行 npm run dev 时提示 { parser: "babylon" } is deprecated; we now treat it as { parser: "babel" } 这个不是报错，而是需要将babylon 换成babel 解决办法是：找到modules包里面的：node_modules\vue-loader\lib\template-co...

2019-03-16 09:50:59 9357 5

原创 js-函数式编程

函数式编程，顾名思义，是使用函数的形式来编程，随着react居高不下的人气，函数式编程逐渐流行了起来。为什么要使用函数式编程，能给我们带来哪些好处呢?下面将一一介绍：纯函数的定义：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。举个不是纯函数例子： var min = 18; var checkage = age => age > min...

2019-02-09 21:59:07 721

原创 JavaScript 复杂判断逻辑的优雅写法

在某些场景中，我们可能会遇到多个判断条件的情况，针对这种情况，我们通常会使使用if/else/switch来进行处理，但是多个判断下，这样的写法会有很多的代码，如何解决呢，请继续往下看首先我们拿if/esle举个栗子，switch写法我就不再这写了 checkStatus(status) { if (status == 1) { this.function1(); ...

2019-02-08 19:46:39 2211

原创 vue 过滤器之根据不同的类型渲染不同的字段

本文旨在分享如何利用vue过滤器，实现简单、高效的对同一个字段不同的字段值，渲染出不同的内容。实际场景中我们可能会遇到后端在传给我们的数据中，某一个字段为type，type的值有1、2、3、4、5、6等，1-6分别对应的是，苹果、梨、葡萄、芒果、香蕉、百香果。如何通过写最少的代码就能实现将他们一一对应起来呢？下面将一一介绍： &amp;amp;amp;lt;ul&amp;amp;amp;gt; &amp;amp;amp;lt;li v-for=&

2019-02-07 13:46:21 4260

原创 Vue实现全选反选功能

整体思路：1、点击一个单选框，记录当前的下标，存入数组A中。 2、定义一个空数组B，把请求到的数据赋值给这个数组。 3、判断A和B的长度是否相等来实现全选和反选。下面贴出全部代码 <template> <div> <input type='checkbox' class='input...

2018-04-28 13:35:34 3003

小田田的blog