0
点赞
收藏
分享

微信扫一扫

vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】


🚀作者简介


能量:🔋容量已消耗1%,自动充电中…

笺言:用博客记录每一次成长,书写五彩人生。

📒技术聊斋

(一)日期处理

1. 时间过滤器

在​​filters​​​函数中定义​​handleDateFormat​

filters: {
// 过滤时间
handleDateFormat(originVal) {
const dt = new Date(originVal);
const y = dt.getFullYear();
// 月份从0开始,使她变成字符串,不足两位时,前面补个0.
const m = (dt.getMonth() + 1 + "").padStart(2, "0");
const d = (dt.getDate() + "").padStart(2, "0");
const hh = (dt.getHours() + "").padStart(2, "0");
const mm = (dt.getMinutes() + "").padStart(2, "0");
const ss = (dt.getSeconds() + "").padStart(2, "0");
//return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;//年月日时分秒
return `${y}-${m}-${d}`;//年月日
},
},

页面使用​​ | handleDateFormat​​ 过滤

<p>{{item.time | handleDateFormat}}</p>

2. 标签、空格、换行符号等过滤器

在​​filters​​​函数中定义​​handleEllipsis​

filters: {
// 过滤标签、空格、换行符号
handleEllipsis(value,) {
let content = value.replace(/<.+?>/g, "");
content = content.replace(/ /gi, "");
content = content.replace(/“/gi, "“");
content = content.replace(/”/gi, "”");
content = content.replace(/‘/gi, "'");
content = content.replace(/’/gi, "'");
content = content.replace(/—/gi, "—");
content = content.replace(/\s/gi, "");
if (!content) return "";
if (content.length > len) {
return content.slice(0, len) + "...";
}
return content;
},
},

页面使用​​ | handleEllipsis​​ 过滤

<p>{{item.name | handleEllipsis}}</p>

(二)字符串处理

1. 字符串首字母大写

在​​filters​​​函数中定义​​handleCapitalize​

filters: {
// 字符串首字母大写
handleCapitalize(value) {
if (!value) return "";
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
},
},

页面使用​​ | handleCapitalize​​ 过滤

<p>{{item.name | handleCapitalize}}</p>

该方法用于将英文字符串的首字母大写处理:

2.输入的字母自动转换成大写

在​​computed​​​生命周期函数中 定义​​handleTextData​​函数

computed: {
handleTextData: {
get() {
return this.ipt;
},
set(val) {
this.ipt = val.toUpperCase();
},
},
},

页面使用​​handleTextData​

<input type="text" v-model="handleTextData" />

2. 翻转字符串

该方法用于将一个字符串进行翻转操作,返回翻转后的字符串

<p>{{ item.name.split('').reverse().join('') }}</p>

3. 随机数

vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】_数组

data() {
return {
code: "",
listArray: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
], //随机数的取值范围
};
},
mounted() {
this.createCode();
},
methods: {
createCode() {
let code = ""; //声明一个空的字符串值用于后面赋值
const codeLength = 6; //验证码的长度,可以根据个人需求改变
const random = this.listArray;
for (let i = 0; i < codeLength; i++) {
//循环遍历codeLength,值是几,就循环几次
let index = Math.floor(Math.random() * 36); //Math.floor方法用于返回小于或等于一个给定数字的最大整数;Math.random方法返回 0(含)和 1(不含)之间的随机数
code += random[index]; //根据索引取得随机数加到code上
}
this.code = code; //把code值赋给data中定义好的code
// console.log(code);
},
},

<p>{{code}}</p>

4. 截断字符串【三种方式】

①使用一个参数

  • ​slice(3)​​从第4个字符开始,截取到最后个字符
  • ​substring(3)​​//从第4个字符开始,截取到最后个字符

②使用两个参数

  • ​slice(1,5)​​//从第2个字符开始,到第5个字符
  • ​substring(1,5)​​//从第2个字符开始,到第5个字符

③如果只用一个参数并且为0的话,那么返回整个参数

  • ​slice(0)​​//返回整个字符串
  • ​substring(0)​​//返回整个字符串

④返回第一个字符

  • ​slice(0,1)​​;//返回"r"
  • ​substring(0,1)​​;//返回"r"

(三)数组处理

1. 从数组中移除重复项

vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】_字符串_02

<script>
export default {
data() {
return {
newArray: "",
characterString: ["1214", "dafw", "2356", "dwrf", "1214"],
};
},

mounted() {
this.handleArrayHeavy()
},
methods: {
handleArrayHeavy() {
let heavy = this.characterString.filter((item,) => {
return this.characterString.indexOf(item, 0) === index;
});
this.newArray = heavy;
console.log(heavy);
},
},
};
</script>

<template>
<div>
<p>{{ newArray }}</p>
</div>
</template>

2. 判断数组是否为空

//方法一
let arr = [];
if (arr.length == 0){
console.log("数组为空")
}else {
console.log("数组不为空")
}

//方法二
if (arr && arr.length > 0) {
console.log('数组不为空')
}else{
console.log('数组为空')
}

3. 合并两个(三个)数组【concat()】

vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】_数组_03

data() {
return {
hege: ["Cecilie", "Lone"],
stale: ["Emil", "Tobias", "Linus"],
three: ["xingqu", "yumaoqiu", "huihua"],
};
},
mounted() {
this.packedArray()
},
methods: {
packedArray() {
var children = this.hege.concat(this.stale,this.three);
console.log(children,"合并三个数组");
},
},

4.数组倒序【reverse()】

vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】_数组_04

data() {
return {
fruits: ["Banana", "Orange", "Apple", "Mango"],
};
},
mounted() {
this.invertedOrder();
},
methods: {
invertedOrder() {
let reverse = this.fruits.reverse()
console.log(reverse,"数组倒序");
},
},

(四)颜色操作

vue定义随机颜色

vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】_javascript_05

使用样式动态绑定 ​​:style="{color: colorlists[Math.floor(Math.random() * 10)],}​

<div
v-for="(item, index) in WordCloudData"
:key="index"
:style="{color: colorlists[Math.floor(Math.random() * 10)],}">
{{ item }}
</div>

data() {
return {
colorlists: [
"rgb(229, 0, 19)",

"rgb(206,194,28)",

"rgb(0,161,233)",

"rgb(109,185,45)",

"rgb(166,0,130)",

"rgb(237,108,0)",

"rgb(240, 28, 131)",

"rgb(84, 21, 226)",

"rgb( 0,128,0)",

"rgb( 255,69,0)",

"rgb( 255,165,0)",

"rgb( 178,34,34)",

"rgb( 255,0,255)",

"rgb(65,105,225)",

"blueviolet",
],
};
},

举报

相关推荐

0 条评论