前提
vue-cliでのプロジェクト作成
htmlでbackground-imageの上にbuttonと文字を表示させています
だたこれだとvue.jsを生かせていないので
HTML
1 <div class="hoge"> 2- <ul class="hoge_scroll_lst"> 3- <li class="backgroundimage"> 4- <router-link to="/hoge1" tag="button"> 5- <img class="button" src="image1"><br> 6- </router-link> 7- </li> 8- <li class="backgroundimage"> 9- <router-link to="/hoge2" tag="button"> 10- <img class="button" src="image2"><br> 11- </router-link> 12- </li> 13- <li class="backgroundimage"> 14- <router-link to="/hoge3" tag="button"> 15- <img class="button" src="image2"><br> 16- </router-link> 17- </li> 18- <li class="backgroundimage"> 19- <router-link to="/hoge4" tag="button"> 20- <img class="button" src="image4"><br> 21- </router-link> 22- </li> 23- <li class="backgroundimage"> 24- <router-link to="/hoge5" tag="button"> 25- <img class="button" src="image5"><br> 26- </router-link> 27- </li>- ........
以下のように試しましたが別々にループがうまくできません、ご教授お願いいたします。
html
1 <img class="list_Position" v-for="image in images" :src="image.url" :alt="image.alt" />
js
1export default { 2 data () { 3 return { 4 images: this.createImages() 5 }; 6 }, 7 methods: { 8 createImages () { 9 let images = []; 10 let base = [ 11 { 12 url: '/static/hoge/btn-main_contents.png', 13 alt: 'p1' 14 }]; 15 for (let loop = 0; loop < 6; loop++) { 16 images = images.concat(base); 17 } 18 return images; 19 } 20 } 21};
回答1件
あなたの回答
tips
プレビュー