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, 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实现【接口数据渲染随机显示】和【仅显示前五条数据】

🔋vue实现随机验证码(数字类型、字母类型)业务【适用于登录页、网页安全码】

🔋vue快速实现锚点功能【简单版与高级版】

🔋vue实现隐藏浏览器右侧滚动条功能

🔋vue后台管理做适配的最佳方案，你知道吗

---

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。