处理数据:
//现有原始数据showCertificateUrl “url01;url02” 使用以下代码将两条通过分号";"分割的url进行处理
const parseUrls = () => {
  urls.value = [];// 每次重新赋值前一定要清空之前的旧数据!
  if (!showCertificateUrl.value) {
    return;
  }
  const urlArray = showCertificateUrl.value.split(';');
  urlArray.forEach(url => {
    const parts = url.split('/');
    const fileName = parts.pop(); // 获取最后一个元素作为文件名
    urls.value.push({ url, name: fileName });
  });
  console.log('urls', urls);
};
 
控制台打印的数据结构如下:
结构中渲染:
 <div v-for="item in urls"
             :key="item.url">
          <p>{{ item.name }}</p>
          <a :href="item.url"
             target="_blank">{{ item.url }}</a>
        </div> 
渲染的效果:

注意,如果打印语句为console.log('urls', urls.value);则控制台打印的结构就是

![[前端]解决Iframe即使设置高度100%,但还是显示滚动条scrollbar的问题](https://i-blog.csdnimg.cn/direct/b21b3972d6be491eb4633423a5217f45.png)


















