使用vuejs根据数组元素显示图标



我收到了租用带有以下设施的阵列的地方:

["dishwasher", "kitchen", "washer_dryer", "tv", "parking", "family", "pets"]

我想为他们中的一些人显示一个图标。我尝试了v-for解决方案,但在所有元素上循环只显示一两个似乎有点奇怪。

<div v-for="amenity in amenities">
<img v-if="amenity === 'pets'" src="/petsicons.png"/>
</div>

我在静态文件夹中的图标是img的。

在vue js中,有什么更有效的方法可以做到这一点

这里是v-for的一些工作示例,您可以使用v-if进行这样的过滤。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="moreImage" >+</button>
<div v-for="(image, index) in images" :key="index">
<img v-if="index === 2" :src="`https://picsum.photos/400/400?image=2${index}`" />
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
images: [1],
},
methods: {
moreImage() {
// make push to get more load index
this.images.push(1)
}
}
})
</script>
</body>
</html>

希望这能有所帮助,谢谢

最新更新