Vue.js 图像 v-for 绑定 [英] Vue.js image v-for bind
本文介绍了Vue.js 图像 v-for 绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有什么方法可以使用 v-for 来加载一组图像?
Any way to use v-for to get an array of images loaded?
已尝试使用以下代码:
我对 Vue 还很陌生,我还有很多东西要学.所以任何帮助将不胜感激.谢谢
Im pretty new to Vue, I still have a lot to learn. So any help will be greatly appreciated. Thanks
<template>
<section class="hero_home">
<app-header></app-header>
<article>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, aperiam doloremque possimus nemo incidunt, consequatur quidem facere in ipsam ratione quod? Provident laborum magnam accusantium sequi optio error sunt, sit.</p>
</article>
<img v-for="image in images" :src="images.url" :alt="images.alt" />
<app-footer></app-footer>
</section>
</template>
<script>
import Header from './header.vue'
import Footer from './footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer
},
data () {
return {
images: [
{ url: '../static/1.jpg', alt: 'I love you nature' },
{ url: '../static/2.jpg', alt: 'Now with dog - Rosé' },
{ url: '../static/3.jpg', alt: 'Jeg er i Danmark' },
{ url: '../static/4.jpg', alt: 'Badabimbadabum' },
{ url: '../static/5.jpg', alt: 'Goodmorning el mundo' },
{ url: '../static/6.jpg', alt: 'My white and rosé with paella' },
{ url: '../static/7.jpg', alt: 'Hopla' },
{ url: '../static/8.jpg', alt: 'Watering by night' },
{ url: '../static/9.jpg', alt: 'Life aint so bad at all...' },
{ url: '../static/10.jpg', alt: 'My whitewine' },
{ url: '../static/11jpg', alt: 'First time for everything...winefair!' },
{ url: '../static/12.jpg', alt: 'Lost around 20% of this years yield!' }
]
}
}
}
</script>
推荐答案
在 src
中使用 image
对象元素,而不是 images
对象数组和 alt
.
Use image
object element, not images
object array here in src
and alt
.
<img v-for="image in images" :src="image.url" :alt="image.alt" />
这篇关于Vue.js 图像 v-for 绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文