VUE开发过程中用到的JS方法

VUE开发过程中用到的JS String()方法

1、substring（）

来源：https://www.w3school.com.cn/js/jsref_substring.asp

应用场景：前端展示对描述过多的文字不展示，当鼠标放上去时，以弹框的方式展示全部内容
实际效果：
实现想法：利用antdv里面的文字提示插件tooltip，当文字描述大于x时，以弹框方式展示，否则全部展示。
代码：

<template slot="content" slot-scope="text">
 <a-tooltip v-if="text.length >= 15" :title="text">
   {{_ellipseText(text, 15)}}
 </a-tooltip>
 <span v-else>{{text}}</span>
</template>

// 隐藏过多文字
_ellipseText (text, num) {
   if (text.length > num) {
     return text.substring(0, num) + '...'
   }
     return text
},

貌似直接使用substring()该方法就行，封装成_ellipseText这个方法感觉没啥必要。
2、indexOf()

来源：https://www.w3school.com.cn/jsref/jsref_indexOf.asp
应用场景：多选场景中，在前端展示的的时候需要根据匹配对象id，展示其对应的value。比如在搜索的时候要多选，传给后端的ID是“100,101,102”，对应的value即在前端展示“哈哈”，“嘿嘿”，“哦哦”，实现方法可以是先获取这个参数对象
[
{
id：100
value:“哈哈”
}，
{
id：101
value:‘嘿嘿’
}，{
id：102
value:‘XX’
}，
{
id：103
value:‘XX’
}，
。。。
]
然后在方法内定义一个空数组，如果符合将push到数组中，最后返回。
实现代码：

_getDutyCenter (value) {
      let dutyCenterId = []
      this.selectedDutyCenter.forEach(item => {
        if (value.indexOf(item.id.toString()) > -1) {
          dutyCenterId.push(item.value)
        }
      })
      return dutyCenterId.join()
    },

这里的indexOf()大于 -1 来提供是否包含该字符串的功能，配合forEach()循环遍历，如果入参包含某对象的id,则将对象的value push到数组中。
3、split()

场景需求：antdv中的多选是以数组保存并展现的，间隔逗号隔开。但是保存在数据库的形式是字符串，后端再传给前端时也是字符串，那么在用indexOf()方法匹配时，就会出现问题。比如parm参数对象如下
[
{id:"-1"，value:hhaha},
{id:“1”，value:heihei}
]
前端获取的value参数为"1,-1",那么使用value.indexOf(parm.id)时，会导致两个参数都会匹配上，我们的要求是1 匹配 hhaha,-1匹配heihei,所以使用split(","),将参数"1,-1",分割成数组

这样就能保证前端多选框的数据能正常显示。

最后

以上就是虚幻麦片为你收集整理的VUE开发过程中用到的JS方法的全部内容，希望文章能够帮你解决VUE开发过程中用到的JS方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。