欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > vue3数据结构的渲染01

vue3数据结构的渲染01

2025/6/4 22:05:12 来源:https://blog.csdn.net/m0_57005111/article/details/140795586  浏览:    关键词: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);则控制台打印的结构就是

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词