vue.jsのv-forを使ってみた

JavaScript, vue.js

広告

vue.jsでリストレンダリングを使ってみた

これまで、カルーセルを実装するということをやっていました。カルーセルに基礎となる部分は殆ど完成したので、実際にカルーセルの部分に画像を配置して、画像をスライドショーのように表示する部分を作ることになりました。画像を表示するにあたり、今後のロジックを考えたところ、ファイルのパスに関する情報をvue.jsのdataの部分に配列で格納することにしました。
配列に入れたものを順番に表示させようとしたところ,vue.jsのv-forという機能が良さそうなので、実装することにしました。

v-forとは

私達は配列に基づいて、アイテムのリストをレンダリングするために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです:
例:
<ul id=”example-1″>
<li v-for=”item in items”>
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: ‘#example-1’,
data: {
items: [
{ message: ‘Foo’ },
{ message: ‘Bar’ }
]
}
})

https://v1-jp.vuejs.org/guide/list.html

使用部分


<div id = carousel>
    <div class = contents
       v-for="item in items">   
     >
        <img v-bind:src="'images/' + item.imagePath"/>
    </div>
</div>

このようにしました。構成として<div id = carousel>がカルーセルのエリアに該当するもので、contentsが画像を配置するエリアとします。そのエリアの中に、画像を表示したいということで、itemsというものが、vueのインスタンスの中のdataの中にあるものとします。

<img v-bind:src=””/>

画像のパスを動的に指定し、imgタグで出力し画像を表示するというものを作りました。

vue.jsでできることはたくさんあってとても便利ですが覚えることも多くとても大変でした。カルーセルも画像が実装できたので、ようやくページらしくなってきました。

広告

JavaScript, vue.js