js之零碎工具(一)

1、字符串超出8字显示 “…”(三目)

{{ scope.row.projectName?(scope.row.projectName.length>8?(scope.row.projectName.substring(0,8))+"...":scope.row.projectName):""}}

2.提取数字

"A12".replace(/[^0-9]/ig,"");

在这里插入图片描述

3.比较26个英文字母的大小

fromCharCode() 方法,可接受一个指定的 Unicode 值,然后返回一个字符串
var n = String.fromCharCode(65);  //  A
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。字符串中第一个字符的位置为 0, 第二个字符位置为 1,以此类推。
var str = "HELLO WORLD";
var n = str.charCodeAt(0);  // 72
  • 先写出 26 个英文字母
computed:{
    numbers() {
      let arr = [];
      for (var i = 1; i < 100; i++) {
        arr.push(i);
      }
      return arr;
    },
    alphas() {
      let arr = [];
      for (var i = 0; i < 26; i++) {
        arr.push(String.fromCharCode(65 + i));
      }
      return arr;
    }
  }, 

根据计算属性打印出 this.alphas 的值为
在这里插入图片描述

  • 对 26 个英文字母进行排序判断, 转化为数字值可以进行比较判断
 Number(startValue.charCodeAt()) - Number(value.charCodeAt())

4.vue模拟tab切换【动态绑定class】

使得点击高亮的下标与数组循环中的下标一致 即 this.activeIndex = i

html

<div class="projectList">
      <ul>
        <li v-for="(item,i) in projectData" :key="i" :class="activeIndex == i?'active':''" @click="projectChoose(i)">{{item.name}}</li>
      </ul>
      <el-button size="small" plain type="success" class="btn-more">更多>></el-button>
    </div>

js

data() {
    return {
      activeIndex:0,
      activeName: "1",
       projectData:[
            {
                name:"项目一",
                id:"1111"
            },
            {
                name:"项目二",
                id:"2222"
            },
            {
                name:"项目三",
                id:"3333"
            },
            {
                name:"项目四",
                id:"4444"
            }  ],
    };
  },
  methods:{
      projectChoose(i){
          this.activeIndex = i
          console.log(i,this.activeIndex)
      }
  }

在这里插入图片描述

5. 对象的解构

在这里插入图片描述

此处{…obj}是把obj对象复制一份, 也可以修改obj 里的b的值,
在这里插入图片描述
打印结果:
在这里插入图片描述

连续解构赋值

在这里插入图片描述
还可以重命名b为data
在这里插入图片描述

6.es6获取数组中,键值对的下标和对应内容

const fruits = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];


const index = fruits.findIndex(fruit => fruit.name === 'cherries');


console.log(index); // 2
console.log(fruits[index]); // {name: 'cherries', quantity: 5}

7. 获取地址栏中?后面的参数

function getLocationParams(routeUrl) {
  let paramsArray = 'backlogServiceId=1526556818799632386&backlogServiceType=SUP_MSG&showLeftMenu=0'.split('&');
  let i;
  const paramsObj = {};
  paramsArray.forEach((item) => {
    i = item.indexOf('=');
    paramsObj[item.slice(0, i)] = item.slice(i + 1);
  });
  return paramsObj;
}
getLocationParams()

打印结果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值