从后端返回的合同url中获取合同的名字，并支持预览

1.后端返回的数据结构： 页面支持多份合同，后端返回的是一个由url组成的字符串数组，类似于:

contractUrl[str1,https://editor.csdn.net/md/someName.pdf];

可以明确的知道我们需要最后一个斜杠/后的字符段，

方法一： 利用split('/')，分隔字符串，split会返回分隔后的字符串数组，数组的最后一个索引对应的字符串就是合同的名字，看代码：

const contractName = ref<string[]>([]);
const contractNameTemple = contractUrl;
  contractNameTemple.forEach(item => {
    contractName.value.push(item.split('/')[item.split('/').length - 1]);
  });

页面渲染：

<div class="contract" v-for="(item, index) in contractUrl">
   <a :href="item">
      {{ contractName[index] }}
    </a>
</div>

方法二： 方法二是看到这个问题立马就想到的方法，在写代码的过程中，发现方法一更好，就没继续了。这里写一下思路： 首先将字符串翻转，然后找到第一个斜杠的索引index，然后利用slice(-index),将原字符串从尾部截取。

const contractName = ref<string[]>([]);
const contractNameTemple = contractUrl;
  contractNameTemple.forEach(item => {
   const index = item.split('').reverse().join('').indexOf('/');
	contractName.push(item.slice(-index));
  });

还是第一种语义化更强，也更精简，推荐第一种。