(0時過ぎると「こんにちは」に戻るんですけどね。どんな仕掛けになっているのでしょう。18">いや、こんばんわ。}}</p>id#appのdiv要素の中にspan要素がある。}}でmassageを読み込む。JSを見ていきましょう。変数HoursでgetHours()メソッドによってDateの時間を取得この部分はJSにあらかじめ用意されている組み込み関数なのでVue.jsではありません。先ほどのHTMLのv-show属性の条件で時間が読み込まれていますね。「時間が18以上であれば表示する」という意味になります。}})続く変数appのVueインスタンスはこれまでと同じ構成ですね。HTMLの{{massage}}に文字列が表示されます。v-showの表示はCSSのdisplayプロパティで切り替えられます。none;になっていることがわかります。v-if次はv-ifディレクティブの事例です。none;の表示切り替えではなくオブジェクト自体が生成されません。v-showよりもelseなどの複雑な分岐を設定できます。CodePen.一見単なるテキストが一行あるように見えます。このテキストの頭の挨拶部分は見る時間帯によって「おはようございます」「こんにちは」など表示が変わります。}}</p>id名appのp要素の中にspan要素が4つ入っている。ifと同様「さもなくは、もし」という意味。これ以外に「さもなくば」のelseと同じv-elseディレクティブもあります。条件は上からHours(時間)が11時台以下(<=)なら、17時台以下なら、23時台以下なら、5時台以下なら、という意味。それではJSを見ていきましょう。}})先ほどと全く同じですね。上で変数Hoursに時間を取得し、下の変数appでmessageに文字列「びゅう!」を代入。HTMLの書き方を変えるだけで同じJSでも挙動が変わりました。時間によって挨拶がかわるわけです。見ると、元のHTMLでは4つあったspan要素が時間帯に該当する一つしか描画されていないことがわかります。これがv-showとの違いです。ループ(v-for)最後にVue.jsの「ループ」のディレクティブ、v-forです。チュートリアルはこちら。CodePen.なんだか一年中理由をつけて酒を飲んでいるようですね。「日本全国酒飲み音頭」の歌詞です。※参考:元ネタはこちらYouTubeコードを見ていきましょう。}}でtitleを読み込む。id名#sakeのul要素の中にはli要素が一つだけある。}}でvalueを読み込む。具体的な文字列が全くなく、li要素も一つだけでかなりシンプルですね。前半は見慣れた構成です。#titleのh1要素に曲のタイトルを読み込ませます。後半を見てみましょう。}})変数sakeでVueインスタンス生成elキーで#sakeと紐付けdataキーに入れ子のsakeキーの値は配列で曲の歌詞が12個入っている。これで#sakeのul要素内のli要素がv-forディレクティブの条件sakeキーの値の数量分ループするわけです。実行されるのはvalueキーへのsakeキーの値の読み込みです。ループ回数を読み込むさて、sakeキーの値を見て見ると酒が飲めるぞの部分が重複していて冗長に感じますね。「●月は」の部分の月の数値もループの回数を入れられると一致しそうです。CodePen.見た目のアウトプットは全く同じなんですけどね。コードはどのように変わったのでしょうか。</li></ul>li要素の部分が変わりました。}}でindexを読み込み1を加算。}}でvalueも読み込む。その他の共通部分はそのまま書く。JSを見てみましょう。}})前半は先ほどと同じですね。曲のタイトル読み込み。}})全体の構造は先ほどと同じなのですがsakeキーの値から重複する文字列が消えてユニークな部分のみになりました。!HTMLのv-forディレクティブの第二引数にindexを加えると、配列のループ回数を読み込むことができます。0からカウントするので1加算します。これで「1月は」「2月は」とループ回数をカウントアップして読み込むことができるようになりました。最後にまずはシンプルなことしかやっていないので、まだ生JSやjQueryでも実現できる範囲です。基本的にはセレクタ名と紐付けるので、DOMの親子関係はそんなに意識しないで済みそうです。書式も配列っぽくてシンプル。JSフレームワークReact、はじめました。Chartsの記事で描画したグラフとVue.jsの連動に挑戦。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。