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