Question

我收到了一些租用类似这样的设施的地方：

["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中更有效的方法是什么？

Answer 1

在这里有一些使用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>

希望这会有所帮助，谢谢

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

1 个答案: