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
にした.
今回は以上.