Vue.jsのサンプル(2)

公式ドキュメントを見ながらサンプルを作ります。

{{ message1 }}
変数seenの値を真偽で切り替えることによって、message2の表示を切り替えられます。
v-ifとv-showはよく似ていますが、v-ifは要素自体の有無を、v-showは表示/非表示を切り替えます。
こんにちは。 さようなら。
↑チェックを入れると「こんにちは」外すと「さようなら」と表示します。
v-on:click は @clickとも書けます。
必須項目が未入力です。 長すぎます。
↑入力文字数によって警告が表示されます。
v-forを使って配列データをolタグで列挙表示します。
  1. {{ e.name }}
v-forとv-bindを使って配列データをoptionタグで列挙表示します。
選択を変更すると、valueの値を取得して表示します。
v-bindは、HTML要素の属性値と、JS世界の変数名を関係づけるものです。
TODO: select要素は、inputやtextarea同様、v-modelを使ってもっときれいに書けるようです。