【vue_3】关于超链接的问题

1、需求

需求:要给没有超链接的列表添加软超链接

2、修改前的代码

javascript 复制代码
<template #default="scope">
	<a :href="getBugUrl(scope.row.BUG列表)" target="_blank">
		{{ scope.row.BUG列表}}
	</a>
</template>
javascript 复制代码
methods: {
    getBugUrl(bugId) {
      // 判断是否包含逗号
      if (bugId && !bugId.includes(',')) {
        return 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bugId;
      }
    },
  },

可以看到,上面的方法只有判断当bugId没有包含逗号的情况,因此我们需要自己补充当有多个值的情况。

3、修改之后

(1)第一次

javascript 复制代码
<template #default="scope">
	<a :href="getBugUrl(scope.row.BUG列表)" target="_blank">
		{{ scope.row.BUG列表}}
	</a>
</template>
javascript 复制代码
methods: {
getBugUrl(bugId) {
		// 判断是否包含逗号
		if (bugId) {
		if (!bugId.includes(',')) {
		// 单个数字的情况
		return 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bugId;
		} else {
		// 多个数字的情况,你可以根据实际情况构建超链接
		const bugArray = bugId.split(',');
		const bugUrls = bugArray.map(bug => 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bug);
		return bugUrls.join(', ');
		}
		}
	},
},

具体代码解释如下:

  • const bugArray = bugId.split(',');: 这一行代码首先将输入的bugId字符串使用split方法以逗号为分隔符拆分成一个数组,存储在bugArray常量中。这意味着如果bugId是一个包含多个bugId的字符串(以逗号分隔),那么现在每个bugId都会成为数组中的一个元素。

  • const bugUrls = bugArray.map(bug => 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bug);: 这一行使用map方法遍历bugArray数组中的每个元素(即每个bugId),并将其转换成对应的URL。生成的URL形式为 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bug,其中bug是当前迭代的bugId。生成的URL数组存储在bugUrls常量中。

  • return bugUrls.join(', ');: 最后,join方法将bugUrls数组中的每个URL用逗号加空格连接起来,并作为最终的结果返回。这意味着返回的字符串包含了多个bugId对应的URL,每个URL之间以逗号和空格分隔。

其中包含的map函数具体解释如下:

map 是JavaScript数组对象的一个方法,它用于对数组的每个元素执行提供的函数,并返回一个新的数组,包含每次函数调用的结果。

在这里,map 方法的具体实现是通过传递一个回调函数给 map 方法,这个回调函数接受数组中的每个元素,并返回一个经过处理后的新元素。在你提供的代码中,使用了箭头函数(=>),箭头函数是ES6引入的一种简写函数的方式,可以更简洁地定义匿名函数。

具体来说,这是箭头函数的语法:

  • map 是JavaScript数组对象的一个方法,它用于对数组的每个元素执行提供的函数,并返回一个新的数组,包含每次函数调用的结果。

  • 在这里,map 方法的具体实现是通过传递一个回调函数给 map 方法,这个回调函数接受数组中的每个元素,并返回一个经过处理后的新元素。在你提供的代码中,使用了箭头函数(=>),箭头函数是ES6引入的一种简写函数的方式,可以更简洁地定义匿名函数。

具体来说,这是箭头函数的语法:

python 复制代码
(element) => {
  // 函数体
}

这里,(element) 是函数的参数,=> 表示箭头函数,后面是函数体。在你的代码中,箭头函数接受参数 bug,并返回一个新的字符串 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bug

所以,使用 map 的目的是对数组中的每个元素进行相同的操作,将每个元素映射为一个新的值,最终返回一个包含这些新值的新数组。在你的代码中,map 方法被用于将每个bugId映射为相应的URL。

(2)第二次

python 复制代码
methods: {
  getBugUrls(bugId) {
    if (bugId) {
      if (!bugId.includes(',')) {
        // 单个数字的情况
        return ['http://XX.com.cn/XX_switch/bug/main?bugId=' + bugId];
      } else {
        // 多个数字的情况
        const bugArray = bugId.split(',');
        return bugArray.map(bug => 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bug);
      }
    }
    return [];
  },
},
python 复制代码
<template #default="scope">
	<span v-for="bugUrl in getBugUrls(scope.row.BUG列表)">
		<a :href="bugUrl" target="_blank">{{ bugUrl }}
		</a>
		<br />
	</span>
</template>

由于这里使用了换行符,因此每个链接都换行了,现在虽然可以实现每个数值是各自的链接,但是却把整个网址都显示出来的,这肯定不符合我们的预期。

(3)第三次

下面这里把换行符换成使用逗号分隔了:

python 复制代码
 <template #default="scope">
<span v-for="(bugUrl, index) in getBugUrls(scope.row.BUG列表)" :key="index">
 <a :href="bugUrl" target="_blank">
 {{ bugUrl }}
 </a>
 {{ index < scope.row.BUG列表.length - 1 ? ',' : '' }}
</span>
</template>

(4)第四次

下面这个修改的,相比于上面就多定义了一个方法,现在这里有两个方法:getBugUrl和extractBugId。

python 复制代码
<template #default="scope">
	<span v-for="(bugUrl, index) in getBugUrl(scope.row.BUG列表)" :key="index">
		<a :href="bugUrl" target="_blank">{{ extractBugId(bugUrl) }}
		</a>
		{{ index < scope.row.BUG列表.length - 1 ? ',' : '' }}
	</span>
</template>
python 复制代码
methods: {
    getBugUrl(bugId) {
      if (bugId) {
        if (!bugId.includes(',')) {
          // 单个数字的情况
          return ['http://XX.com.cn/XX_switch/bug/main?bugId=' + bugId];
        } else {
          // 多个数字的情况
          const bugArray = bugId.split(',');
          return bugArray.map(bug => 'http://XX.com.cn/XX_switch/bug/main?bugId=' + bug);
        }
      }
      return [];
    },
    extractBugId(bugUrl) {
      // 提取 bugId 后面的数字
      const match = bugUrl.match(/bugId=(\d+)/);
      return match ? match[1] : '';
    },
  },

getBugUrl 方法用于生成包含bugId对应URL的数组。

  • 首先检查输入的 bugId 是否存在,如果存在则进一步判断是否包含逗号。
  • 如果 bugId 不包含逗号,表示只有一个bugId,那么返回包含这个bugId对应URL的数组。
  • 如果 bugId 包含逗号,表示有多个bugId,那么先使用逗号拆分成数组,然后通过 map 方法将每个bugId映射为对应的URL,最后返回这个URL数组。
  • 如果 bugId 不存在,返回一个空数组。

extractBugId 方法用于从bugUrl中提取出bugId。

  • 使用正则表达式 match 方法,匹配以 bugId= 开头,后面跟着一个或多个数字的部分。
  • 如果匹配成功,返回匹配的第一个括号中的内容,即bugId。如果匹配不成功,返回空字符串。

为什么是match[1]不是match[0]呢?

对于 JavaScript 中的正则表达式匹配,match 方法返回一个数组,该数组的第一个元素是整个匹配的字符串,而从第二个元素开始是与正则表达式中的括号分组匹配的内容。因此,match[1] 获取的是第一个括号分组匹配的内容,而match[0] 获取的是整个匹配的字符串。

例如,考虑下面的代码:

python 复制代码
const bugUrl = 'http://XX.com.cn/XX_switch/bug/main?bugId=123';
const match = bugUrl.match(/bugId=(\d+)/);

console.log(match[0]); // 整个匹配的字符串,即 "bugId=123"
console.log(match[1]); // 第一个括号分组匹配的内容,即 "123"

还有一个细节如下:对于碰到结构里面有v-if和v-else的逻辑,则两个都必须修改。

(5)第五次

但是尽管修改到现在已经差不多了,但是还有最后一个问题,就是如果只有一个数值的,这种情况其后面有逗号会不美观,因此我们需要去掉逗号。

但是这个时候我发现无论如何修改逻辑,逗号一直存在,这种时候怎么办呢?

思路:在getBugUrl方法的return之前的的bugArray,将其打印出来看一下,看看index是多少。此外,只打印index是看不出什么东西的,因此打印index的时候要顺带打印对应的id值。

其实问题就出现在这一行 <span v-if="index < scope.row.BUG列表.length - 1">,</span>,如何让只有一个数字的时候,让v-if失效?

后来发现,其实上面的代码当中scope.row.BUG列表.length得到的不是列表的个数,因为是字符串的每个字符的格式,因此修改如下:

python 复制代码
<template #default="scope">
	<span v-for="(bugUrl, index) in getBugUrl(scope.row.BUG列表)" :key="index">
		<a :href="bugUrl" target="_blank">{{ extractBugId(bugUrl) }}
		</a>
	<span v-if="index < scope.row.BUG列表.length - 1 && scope.row.BUG列表.length > 7">,</span>
	</span>
</template>
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试