vue.js を学び始めた.
data で設定したプロパティを2つ同時に mustache で展開できたのでメモ.
動作環境
- vue.js 2.x
特に凝ったことはしないので, local にファイルを置いてブラウザ確認.
仮想環境等を構築する必要なし.
結論
{{ hoge[fuga] }} みたいな mustache 記法で vue モデルのプロパティの展開が可能.
fuga を {{ }} で囲む必要なし.
今回やること
- vue.js で配列の中身をバインドする
- 使うパラメータは html に出力して視覚化
最終的にこんなものが出来上がるようにする↓
やってみる
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- 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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// 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 にした.
今回は以上.
