【Vue.js】v-ifを使った条件分岐とv-forを使った繰り返し処理

Vue.jsを使って条件分岐や繰り返し処理をしたいという場合があると思います。

Vue.jsにもif文やfor文のような処理が可能です。

今回は、バインドの基本とv-ifを使った条件分岐とv-forを使った繰り返し処理について書いていきたいと思います。

データのバインド

データのバインドとは

データのバインドとはJavaScript のデータを変更したりDOMを変更することを仕組みのことです。

imgタグの属性を指定する

タグの属性を指定する場合はマスタッシュではなく:(コロン)から始まる指定になります。

html

<div id="image">
        <p><img :src="src" :alt="name"></p>
</div>

js

srcには画像パスを入れてnameにはaltを指定します。

<script>
var image = new Vue({
        el: "#image",
        data: {
                src: "https://placehold.jp/150x150.png",
                name: "説明"
        }
})
</script> 

Vue.jsで条件分岐

条件分岐をVue.jsで行う場合は、「v-if」、「v-else-if」、「v-else」を使います。

v-ifを使った条件分岐

html

下記のソースではactiveがtrueの場合に「activeの値はtrueです。」という文字が表示されます。

<div id="judgement">
        <div v-if="active">activeの値はtrueです。</div>
</div>

js

<script>
var app2 = new Vue({
        el: "#judgement",
        data: {
                active: true
        }
})

v-if、v-else-if、v-elseを使った条件分岐

html

<div id="app">
        <p v-if="num == 1">numは 1</p>
        <p v-else-if="num == 2">numは 2</p>
        <p v-else>numは　1 でも 2 でもない</p>
</div>

js

下記はnumに1を指定しているのでhtmlは「numは 1」が表示されます。

<script>
var app = new Vue({
        el: "#app",
        data: {
                num: 1
        }
})
</script>

Vue.jsで繰り返し処理

Vue.jsにも繰り返し処理があります。

for文のような繰り返し処理をする場合には「v-for」を使います。

サンプルでは「itemsList」の配列を1つずつ取り出して「items」というオブジェクトに入れていくイメージです。

「v-for」を使うことで少ないコードでたくさんの処理を行うことができそうですね。

v-forを使った繰り返し処理

html

<div id="app1">
        <ul v-for="items in itemsList">
                <li>{{ items.name }}:{{ items.code }}</li>
        </ul>
</div>

js

<script>
var app1 = new Vue({
        el: "#app1",
        data: {
                itemsList: [
                        {name: "アイテム1", code:"製品番号1"},
                        {name: "アイテム2", code:"製品番号2"},
                        {name: "アイテム3", code:"製品番号3"},
                        {name: "アイテム4", code:"製品番号4"},
                        {name: "アイテム5", code:"製品番号5"}
                ]
        }
})
</script>

サンプル

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。