vue3数据结构的渲染01

处理数据：

//现有原始数据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);则控制台打印的结构就是