Vue.js圖像v - 綁定

任何使用v-for獲取圖像數組的方式？已經嘗試過以下代碼：對於Vue來說我很新，我還有很多東西需要學習。所以任何幫助將不勝感激。由於Vue.js圖像v - 綁定

<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>

來源

2017-07-06 Thomas Alexander Woolff

使用image對象元素不images對象數組在這裏src和alt

<img v-for="image in images" :src="image.url" :alt="image.alt" />

來源

2017-07-06 12:31:32 C2486

非常感謝仙人！ –

@ThomasAlexanderWoolff：我希望你從你的錯誤中傾斜 – C2486

我做到了哈哈，非常感謝Rishi。 –

Vue.js圖像v - 綁定

回答

相關問題