vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】
2023-09-27 14:27:10 时间
🚀作者简介
主页:水香木鱼的博客
专栏:后台管理系统
能量:🔋容量已消耗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, len) {
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. 随机数
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. 从数组中移除重复项
<script>
export default {
data() {
return {
newArray: "",
characterString: ["1214", "dafw", "2356", "dwrf", "1214"],
};
},
mounted() {
this.handleArrayHeavy()
},
methods: {
handleArrayHeavy() {
let heavy = this.characterString.filter((item, index) => {
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()】
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()】
data() {
return {
fruits: ["Banana", "Orange", "Apple", "Mango"],
};
},
mounted() {
this.invertedOrder();
},
methods: {
invertedOrder() {
let reverse = this.fruits.reverse()
console.log(reverse,"数组倒序");
},
},
(四)颜色操作
vue定义随机颜色
使用样式动态绑定 :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",
],
};
},
📓精品推荐
🔋vue实现随机验证码(数字类型、字母类型)业务【适用于登录页、网页安全码】
木鱼谢语:感谢各位技术大牛们的点赞👍收藏🌟,每一期都会为大家带来快速适用于业务的文章,让大家做到cv即可。