wordpress建站服务器选择,自适应网站用什么软件设计,北京app设计公司,国外产品设计网站1、需求2、修改前的代码3、修改之后#xff08;1#xff09;第一次#xff08;2#xff09;第二次#xff08;3#xff09;第三次#xff08;4#xff09;第四次#xff08;5#xff09;第五次 1、需求
需求#xff1a;要给没有超链接的列表添加软超链接 2、修改前… 1、需求2、修改前的代码3、修改之后1第一次2第二次3第三次4第四次5第五次 1、需求
需求要给没有超链接的列表添加软超链接 2、修改前的代码
template #defaultscopea :hrefgetBugUrl(scope.row.BUG列表) target_blank{{ scope.row.BUG列表}}/a
/templatemethods: {getBugUrl(bugId) {// 判断是否包含逗号if (bugId !bugId.includes(,)) {return http://XX.com.cn/XX_switch/bug/main?bugId bugId;}},},可以看到上面的方法只有判断当bugId没有包含逗号的情况因此我们需要自己补充当有多个值的情况。
3、修改之后
1第一次
template #defaultscopea :hrefgetBugUrl(scope.row.BUG列表) target_blank{{ scope.row.BUG列表}}/a
/templatemethods: {
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引入的一种简写函数的方式可以更简洁地定义匿名函数。
具体来说这是箭头函数的语法
(element) {// 函数体
}这里(element) 是函数的参数 表示箭头函数后面是函数体。在你的代码中箭头函数接受参数 bug并返回一个新的字符串 http://XX.com.cn/XX_switch/bug/main?bugId bug。
所以使用 map 的目的是对数组中的每个元素进行相同的操作将每个元素映射为一个新的值最终返回一个包含这些新值的新数组。在你的代码中map 方法被用于将每个bugId映射为相应的URL。
2第二次
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 [];},
},template #defaultscopespan v-forbugUrl in getBugUrls(scope.row.BUG列表)a :hrefbugUrl target_blank{{ bugUrl }}/abr //span
/template由于这里使用了换行符因此每个链接都换行了现在虽然可以实现每个数值是各自的链接但是却把整个网址都显示出来的这肯定不符合我们的预期。 3第三次
下面这里把换行符换成使用逗号分隔了 template #defaultscope
span v-for(bugUrl, index) in getBugUrls(scope.row.BUG列表) :keyindexa :hrefbugUrl target_blank{{ bugUrl }}/a{{ index scope.row.BUG列表.length - 1 ? , : }}
/span
/template4第四次
下面这个修改的相比于上面就多定义了一个方法现在这里有两个方法getBugUrl和extractBugId。
template #defaultscopespan v-for(bugUrl, index) in getBugUrl(scope.row.BUG列表) :keyindexa :hrefbugUrl target_blank{{ extractBugId(bugUrl) }}/a{{ index scope.row.BUG列表.length - 1 ? , : }}/span
/templatemethods: {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] 获取的是整个匹配的字符串。
例如考虑下面的代码
const bugUrl http://XX.com.cn/XX_switch/bug/main?bugId123;
const match bugUrl.match(/bugId(\d)/);console.log(match[0]); // 整个匹配的字符串即 bugId123
console.log(match[1]); // 第一个括号分组匹配的内容即 123还有一个细节如下对于碰到结构里面有v-if和v-else的逻辑则两个都必须修改。 5第五次
但是尽管修改到现在已经差不多了但是还有最后一个问题就是如果只有一个数值的这种情况其后面有逗号会不美观因此我们需要去掉逗号。
但是这个时候我发现无论如何修改逻辑逗号一直存在这种时候怎么办呢
思路在getBugUrl方法的return之前的的bugArray将其打印出来看一下看看index是多少。此外只打印index是看不出什么东西的因此打印index的时候要顺带打印对应的id值。 其实问题就出现在这一行 span v-ifindex scope.row.BUG列表.length - 1,/span如何让只有一个数字的时候让v-if失效
后来发现其实上面的代码当中scope.row.BUG列表.length得到的不是列表的个数因为是字符串的每个字符的格式因此修改如下
template #defaultscopespan v-for(bugUrl, index) in getBugUrl(scope.row.BUG列表) :keyindexa :hrefbugUrl target_blank{{ extractBugId(bugUrl) }}/aspan v-ifindex scope.row.BUG列表.length - 1 scope.row.BUG列表.length 7,/span/span
/template
