Question

我的图像列表很长，但只想显示其中5张

这是我尝试过的代码

        <ul>
            <li v-for="index in 5" :key="index">
                <img v-bind:src="image.ImageUrl[index]" />
            </li>
        </ul>

如果使用“跟随”功能可以正常工作，但是它将显示所有图像

        <ul>
            <li v-for="image in Images">
                <img v-bind:src="image.ImageUrl" />
            </li>
        </ul>

Answer 1

您可以以编程方式执行此操作，而不是使用索引（并为模板添加逻辑）。

Computed properties非常适合以下任务：

（用您的{{ image }}替换<img ..>）

var app = new Vue({
  el: '#app',
  data: {
    images: [1,2,3,4,5,6,7,8]
  },
  computed: {
    imagesSliced() {
      return this.images.slice(0,5);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(image, index) in imagesSliced" :key="index">
    {{ image }}
    <!--  <img v-bind:src="image.ImageUrl" /> -->
    </li>
  </ul>
</div>

Answer 2

您需要索引Images才能首先获得image，请尝试使用Images[index].ImageUrl而不是image.ImageUrl[index]，其中在第一个for循环中未定义image：

<ul>
  <li v-for="index in 5" :key="index">
    <img v-bind:src="Images[index].ImageUrl" />
  </li>
</ul>

在vue.js中对属性使用v-for range

2 个答案: