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

Posted 2022-09-28 水香木鱼

🚀作者简介

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗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(/&nbsp;/gi, "");
      content = content.replace(/&ldquo;/gi, "“");
      content = content.replace(/&rdquo;/gi, "”");
      content = content.replace(/&lsquo;/gi, "'");
      content = content.replace(/&rsquo;/gi, "'");
      content = content.replace(/&mdash;/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即可。