意想不到的知识点：svg，toFixed，|| 和 && 操作符，$nextTick ，Vue中封装的数组。。。

一个好好的程序员

已于 2022-05-27 20:30:36 修改

阅读量513

点赞数 1

文章标签：前端

于 2022-05-17 23:16:52 首次发布

本文链接：https://blog.csdn.net/m0_62823653/article/details/124831572

版权

第一部分：svg的两种用法

第一种：svg可以当做路径使用

<img  style="width:64px" src=".xx.svg" alt="">

第二种：可以直接使用svg标签

<!--
  以下四个属性可写可不写
  width:宽度
  height:高度
  viewBox:设置4个值 0 0 130 130
  前两个值：x与y轴的偏移量
  后两个值：图片的原大小
  fill:填充颜色;例如fill="pink"
  xmlns属性可写可不写
  xmlns 属性则是用于声明命名空间，防止来自不同技术的元素发生冲突
-->
<!-- 这是一个汉堡包组件的svg：举例 -->
<svg
   viewBox="0 0 1024 1024"
   xmlns="http://www.w3.org/2000/svg"
   width="64"
   height="64"
   fill="pink"
 >
   <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c04.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-83.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>

第二部分：toFixed

toFixed它是一个四舍六入五成双的诡异的方法(也叫银行家算法)

toFixed为四舍五入（银行家算法）
元素.toFixed(保留小数位)

第三部分：|| 和 && 操作符的返回值

|| 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先强制转换为布尔类型，然后再执行条件判断。

对于 || 来说，如果条件判断结果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值。
&& 则相反，如果条件判断结果为 true 就返回第二个操作数的值，如果为 false 就返回第一个操作数的值。

|| 和 && 返回它们其中一个操作数的值，而非条件判断的结果

第四部分：$nextTick 作用

在以下情况下，会用到nextTick：

在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。
在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中。

因为在created()钩子函数中，页面的DOM还未渲染，这时候也没办法操作DOM，所以，此时如果想要操作DOM，必须将操作的代码放在nextTick()的回调函数中。

this.$nextTick(() => {
    // 获取数据的操作...
})

第五部分：Vue中封装的数组方法有哪些

"push",
"pop",
"shift",
"unshift",
"splice",
"sort",
"reverse"

第六部分：单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数