コース: Vue.js 入門
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
項目のデータを複数にする
このレッスンでは複数の項目のデータから リストを作ってページに加えたいと思います。 今開いている HTML ドキュメントの Vue のコードなんですが データバインディングを使って ToDo リストという想定なんですが 項目が１つだけ作ってあります。 どういう状態かと言うと データバインディングは この２つのデータで行っているのですが body 要素の方の中には li 要素が１個だけ入っています。 そして input 要素 checkbox なんですが それとテキストですね。 これに対してデータバインディングが 行われているのですが まずテキストの方なんですが input 要素がありまして そこに入力した値が v-model で todo という変数と バインディングされています。 今空っぽですが、この値が input 要素に入れたテキストで 改められるわけですね。 そうするとこの値はまた反映されて こちらです。 span 要素にありますけども テキストとして表示される ということになります。 もう１つ、今度は done の方に関わるんですが v-model で やはり checkbox に対して この done がバインディングされています。 デフォルトは false なんですが チェックボックスにチェックを付けると ここが true に変わります。 そうすると、その値がまた反映されて こちらですね。 v-bind:class ということで クラスの設定がオン・オフされます。 クラスはこの done というもので こちらで定義されているわけですね。 そのような仕組みになっているのですが ちょっと確認をしてみましょう。 ［ファイル］＞ ［リアルタイムプレビュー］です。 項目を入力しましょう。 「Vue.js を学ぶ」と。 入力したものがテキストとして バインディングされて反映されていますね。 もう少し正確に言うと このテキストが Vue のオブジェクトのデータを更新し それがこちらのテキストに反映されていると。 もう１個チェックボックスです。 チェックを付けるとこのスタイルが変わります。 チェックを外すとまた スタイルが元に戻るということなんですが これもチェックのオン・オフの状態が Vue のオブジェクトのデータを変更し それに従ってスタイルを変えてると…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。