文字渐变 输入框失去焦点保存 数组常用方法

1. css设置文字渐变

CSS 实现文字渐变色 - 简书 (jianshu.com)参考这里。把容器的背景色设置渐变，文字颜色透明，背景按照文字裁剪，剩下的就是文字渐变啦。链接里还有第二种方法，可以了解下。

我是文字渐变
.text-gradient{
    background-image: linear-gradient(180deg, #57FFF5 0%, rgba(87, 255, 245, 0.5) 100%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 26px;
    line-height: 36px;
}
1
2
3
4
5
6
7
8

2. input输入框在失去焦点或回车之后 保存数据

如果失去焦点和回车绑定的是同一事件，那么每次回车后，该方法会执行两次，所以只需要让回车触发”失去焦点“事件就好了。如：

1

3. 在vue项目中引入其他的html文件

• 把html文件写在public文件夹里

• 引入的时候使用’/?文件夹/文件名’, public目录下的，直接用/代表public，不需要再去…/翻层级

  如：window.open('/other1.html', '_blank')，或者使用a标签

4. 数组常用操作

数组切割/筛选

• splice(index，count，?('str1' , 'str2'))，用于删除数组元素，或者替换元素。

  当只传前两个参数的话，就是删除元素，删除开始位置的索引，删除的数量，可以配合arr.indexOf(str)一起使用，来确定索引下标。

  如果继续传其他参数的话，就是把索引位置的元素替换为其他字符串，这个是可以传多个的，按照传的顺序依次插入

• slice(begin, end)用于保留元素。包含begin，不包含end，是左闭右开的区间

  如[a,b,c,d].slice(1,3) => 结果就是[b,c]

• arr.filter(item => item === value)返回值是满足条件的数组

  item是arr里面的每一项，item===value是条件，当然这个按照自己的需求写。不改变原数组，返回满足条件的新数组。

数组增删/修改

改变原数组的方法：

• arr.pop()从数组末尾删除一个元素，返回值为删除的元素

• arr.push(item)从数组末尾增加一个元素，返回值为改变后数组的长度

• arr.shift()从数组开头删除一个元素，返回值为删除的元素

• arr.unshift(item)从数组开头增加一个元素，返回值为改变后数组的长度

• arr.sort()重新排序数组，默认从小到大

  可以改变顺序。升序：arr.sort(function(a,b){return a-b}); 降序：arr.sort(function(a,b){return b-a});

不改变原数组：

• arr.reverse()颠倒数组的顺序，返回值为颠倒顺序后的数组

数组查找

• arr.find(item => item > 3) 当有满足条件的元素时，返回该元素，并且停止运行。所以技能查找满足条件的第一个元素
• arr.findIndex(item => item !== 1) 同理，返回满足条件的第一个元素的下标
• arr.filter(item => item === value)还是filter，根据给的条件，可以找到全部满足条件的元素。