vuejs怎么通过两个v-for和v-if判断一个数组中name是否有重复值并且调用重复值数据数组数据为 cp name拉网铝单板url#jj该产品是室内天花吊顶的个性化产品工艺先进的拉网技术造就了细腻的网格。搭配下来会营造出视觉通透的效果并且能在一定程度上降低噪音污染金属铝拉网以优质铝合金为主要材料按客户提供设计尺寸、形状和构造形式经过工titlepicdfilep20
<p>可以使用一个嵌套的v-for循环来遍历数组,并使用v-if指令来判断是否有重复的name值。具体实现如下:</p>
<template>
<div>
<div v-for="(item1, index1) in cp" :key="index1">
<div v-for="(item2, index2) in cp" :key="index2" v-if="item1.name === item2.name && index1 !== index2">
{{ item2 }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cp: [
{'name':'拉网铝单板','url':'#','jj':'该产品是室内天花吊顶的个性化产品,工艺先进的拉网技术,造就了细腻的网格。搭配下来,会营造出视觉通透的效果,并且能在一定程度上降低噪音污染,金属铝拉网以优质铝合金为主要材料,按客户提供设计尺寸、形状和构造形式经过工','titlepic':'/d/file/p/2023/05-30/d7bf16ab5659c851eb93c87a2274feac.jpg'},
{'name':'浮雕铝单板','url':'#','jj':'铝单板雕刻花格,立体铝单板雕刻花格已不再是一种简单的装修材料,而是一种精美的艺术装饰品,浮雕铝单板成为代表富贵身价,豪华气派的风景线!采用技术研制开发的铜艺整体雕花护栏。铝单板雕刻护栏、多种系列产品,以它独','titlepic':'/d/file/p/2023/05-30/a4c020b60c47669ae664f57e40726e70.jpg'},
{'name':'铝窗花/屏风','url':'#','jj':'铝窗花利用现代材料,以进口表面处理原料,精心打造!产品耐用,防火,防潮,环保。','titlepic':'/d/file/p/2023/05-30/a0c20f40686bebbfa6dbf232becb2cfa.jpg'},
{'name':'铝空调罩','url':'/cpzx/17.html','jj':'应用领域:楼宇大堂/候机亭/公共场所/','titlepic':'/d/file/p/2022/05-14/b404c7d5994af2c1d492a7cb15b81e46.png'},
{'name':'铝蜂窝板','url':'/cpzx/16.html','jj':'应用领域:楼宇大堂/候机亭/公共场','titlepic':'/d/file/p/2022/05-14/155172ae9973a26cd32921cb7620ac83.png'},
{'name':'铝方通/铝天花','url':'/cpzx/15.html','jj':'应用领域:适用于地铁/高铁站/车站/机场/大','titlepic':'/d/file/p/2022/05-14/0aafed96b00969c575947390d95a8dd7.png'},
{'name':'氟碳喷涂铝单板','url':'/cpzx/14.html','jj':'适用于各种建筑内外墙/大堂门面/柱','titlepic':'/d/file/p/2022/05-14/d1acf193d55d0dd653f7a270e4af0362.png'},
{'name':'包柱铝单板','url':'/cpzx/13.html','jj':'应用领域:适用于各种建筑内外墙/大','titlepic':'/d/file/p/2022/05-10/43031ded0bcf04450312d1fff097f3e2.png'},
{'name':'木纹铝单板','url':'/cpzx/12.html','jj':'应用领域:楼宇大堂/候机亭/公共场所/','titlepic':'/d/file/p/2022/05-10/a65773cfc70dcd49888c615c1a02a922.png'},
{'name':'双曲铝单板','url':'/cpzx/11.html','jj':'应用领域:适用于各种建筑内外墙/大厅门','titlepic':'/d/file/p/2022/05-10/f8c0ea147eac36e29bfe9d3a8abcc58b.png'},
{'name':'雕花铝单板','url':'/cpzx/10.html','jj':'应用领域:适用于各种建筑内外墙/大堂门厅/','titlepic':'/d/file/p/2022/05-10/e49d5a506628bfeb3eaa98fe36ff2a58.png'},
{'name':'冲孔铝单板','url':'/cpzx/9.html','jj':'应用领域:适用于各种建筑内外墙/大堂','titlepic':'/d/file/p/2022/05-10/865a70d181991d304685d5184f84e166.png'},
]
}
}
}
</script>
<p>在上面的代码中,我们使用了两个嵌套的v-for循环来遍历数组cp中的每一个对象。然后,我们使用v-if指令来判断item1和item2的name属性是否相同以及它们的索引是否相同。如果它们的name属性相同,且索引不同,说明存在重复值,我们就可以调用重复值数据</p>
原文地址: https://www.cveoy.top/t/topic/fG1Q 著作权归作者所有。请勿转载和采集!