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

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

動作環境

  • vue.js 2.x

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

結論

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

今回やること

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

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

やってみる

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

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

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

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

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

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

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

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

初期値について

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

今回は以上.

スポンサーリンク
336 x 280 – レクタングル(大)
336 x 280 – レクタングル(大)
  • このエントリーをはてなブックマークに追加

この記事が気に入ったら
いいね!しよう

スポンサーリンク
336 x 280 – レクタングル(大)
トップへ戻る