Vue.jsのサンプル(2)
公式ドキュメントを見ながらサンプルを作ります。
{{ message1 }}
変数seenの値を真偽で切り替えることによって、message2の表示を切り替えられます。
v-ifとv-showはよく似ていますが、v-ifは要素自体の有無を、v-showは表示/非表示を切り替えます。
必須項目が未入力です。
長すぎます。
↑入力文字数によって警告が表示されます。
v-forを使って配列データをolタグで列挙表示します。
- {{ e.name }}
v-forとv-bindを使って配列データをoptionタグで列挙表示します。
選択を変更すると、valueの値を取得して表示します。
v-bindは、HTML要素の属性値と、JS世界の変数名を関係づけるものです。
TODO: select要素は、inputやtextarea同様、v-modelを使ってもっときれいに書けるようです。