Vue.js v-on を使ってデータバインディングした

vue.js を学び始めた.
data で設定したプロパティを2つ同時に mustache で展開できたのでメモ.

動作環境

• vue.js 2.x

特に凝ったことはしないので, local にファイルを置いてブラウザ確認.
仮想環境等を構築する必要なし.

結論

{{ hoge[fuga] }} みたいな mustache 記法で vue モデルのプロパティの展開が可能.
fuga を {{ }} で囲む必要なし.

今回やること

• vue.js で配列の中身をバインドする
• 使うパラメータは html に出力して視覚化

最終的にこんなものが出来上がるようにする↓

やってみる

<!-- html -->

<div id="app">
    <div style="height:10px;">{{ list[pointer] }}</div>
        <p>list: {{ list }}</p>
        <p>pointer: {{ pointer }}</p>
        <p>cntClick: {{ cntClick }}</p>
    <button v-on:click="increment">click</button>
</div>

// js

var vm = new vue({
    el: '#app',
    data: {
        list: ['google', 'amazon', 'facebook', 'takimoto', ''],
        cntclick: 0,
        pointer: 0
    },
    methods: {
        increment: function() {
            this.cntclick++;

            this.pointer++;
            if (this.cntclick % this.list.length === 0) {
                this.pointer = 0;
            }
        }
    }
});

これで先程の gif のような結果になる.

ざっとコードの解説をする.

vue モデルで定義した list, pointer について

• list は配列
• pointer は 0~4 の数字

これらは一つずつ mustache で展開する必要があると思い込んでいた.
こんな具合に↓

• {{ list }}
• {{ pointer }}

でも実は同時に展開可能らしい.

pointer の値によって list で選択される要素が変わる.
{{ list[pointer] }} って書くと期待通りの動作をしてくれる.

初期値について

vue モデルではあとからプロパティを追加することができないらしい.
html 側で利用したい変数は予め初期値を指定して vue モデルに定義しておく.
今回の例だと cntClick, pointer の初期値をそれぞれ 0 にした.

今回は以上.