Question

大家好，大家好。如何在Vue js中使用v-for方法显示图像列表？

如果我有这样的代码：

<v-flex>
        <h4>{{$translate('bz_doc_path')}}</h4>
        <p><a :href="business_doc_path">{{business_doc_path}}</a></p>
        <v-img
        :src="business_doc_path"
        max-width="50%"
        max-height="auto"
        />
</v-flex>

数据组件：

<script>
  export default {
         data(){
           return {
           business_doc_path: this.props.business_doc_path
  }
 },
 props:[
    'props'
 ],
 computed:{
 r(){
  return this.props
  },
 }
}
</script>

Answer 1

您可以在v-flex组件上使用v-for指令。 v-for需要一个列表或对象（可迭代）以及一个键。参见文档https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

<v-flex v-for="item in items" :key="item.id">
        <h4>{{$translate(item['bz_doc_path'])}}</h4>
        <p><a :href="item['business_doc_path']">{{item['business_doc_path']}}</a></p>
        <v-img
        :src="item['business_doc_path']"
        max-width="50%"
        max-height="auto"
        />
</v-flex>

如何使用v-for方法显示<v-img>列表？

1 个答案: