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