v-forとv-ifを使ってリストを状況に応じて表示する！
はじめに 今回はvueのテンプレート構文であるv-forの基本的な使い方を解説し、v-forとv-ifを組み合わせて下記の様な仕組みを作っていきます。 v-ifに関しては過去の記事にて解説しているので、そちらを参考にして下さい。 v-forの使い方 繰り返し表現であるfor文に相当するテンプレート構文です。構文は以下の様に書きます。 配列の中身が変数に格納されます。この配列にはオブジェクトも入れることができ、オブジェクトを入れた場合は以下のようになります。 itemに値、keyにプロパティが格納されます。 買い物リストを出力する まず、上記の様な買い物リストを使って、v-forの基本的な使い方を見ていきましょう。 var dataにて買い物リストの内容をitems配列に設定します。v-forを使ってそれをitemに格納し、リスト表示させればOKです。 リストを条件に応じて表示する さて、v-forとv-ifを使ってクリックするとリストが表示される仕組みを作っていきましょう。 要件・リストバー(柱、上弦)をクリックするとリストの中身(キャラクター名)が表示される。・再度リストバーをクリックするとリストの中身が閉じる。・v-forとv-ifを使う。 サンプルコード html部分 6行目・buttonタグにonclick(クリックした際の反応)でdoAction関数をセットしいます。 8行目・v-ifを使って条件分岐をしています。(今回は変数haのtrue …
v-ifで条件分岐をしよう！
はじめに Vueのテンプレート構文を学んでいきます。前回はv-bindを使ってstyle属性をバインドすることで、色やフォントサイズを変えていきました。 今回はv-ifの基礎や使い方を説明していきます。 v-ifの基本的な使い方 条件分岐のif文に相当するテンプレート構文です。 以下のように記述します。 この場合だと条件式の場合は「内容①」それ以外の場合は「内容②」が出力されます。 3つ以上の条件分岐 v-ifも他のプログラミング言語と同じ様に、elseifを使うことで条件分岐を増やすことができます。例えば3つの条件分岐を行いたい場合は この場合は条件式Aの時は「内容①」条件式Bの時は「内容②」それ以外の場合は「内容③」が出力されます！！！慣れちゃえば簡単ですね。。 例題！3の倍数判定カウンター 要件・カウンターを作り、クリックした回数を数えられる様にする。・カウンターが3の倍数の時は「3の倍数です」と出力する。・カウンターが3の倍数の時には「3の倍数ではありません。余りがXです」と正しい余りを入れて出力する。 解説 HTML部分 「カウント数を3で割った余りによって内容が変化する」ようにv-if、v-else-if、v-elseを使用して条件分岐をさせています。 また、3行目のv-ifでは3の倍数にする為に「カウント数を3で割った余りが0」と「カウント数が0でない」の二つの条件式を設定しています。 条件式において・A かつ …
v-bindでスタイルを変える
はじめに 前回のVue入門①ではVueの基本的な書き方についてまとめていきました。 今回からはVueのテンプレート構文に入ります テンプレート構文はVue独自の書き方で、Vue学習の基本に当たる部分になります。 v-bindとは？ v-bindはタグの属性の値に変数などを設定できます。設定する値には変数やオブジェクトなどを入れることができます。 宣言方法は 例題！v-bindでスタイルを変えよう！ 例題：v-bind使って文字の色とフォントサイズが違うexample1とexample2を出力する。各文字の色とフォントサイズは以下に示す。 example1：文字色=red、フォントサイズ=20ptexample2：文字色=blue、フォントサイズ=30pt やる気のある人は一緒に考えてみましょう！！ 解説 <出力結果> <使用コード> v-bindに該当する所の詳細を見ていきます。 表示(出力)の部分 今回は文字色とフォントサイズを変更するので、v-bindを使ってstyle属性を指定しています。styleの値は上はstyles、下にはstyles_2を置いています。 スクリプト …
Vueで「Hello Vue!!」を出力する
はじめに 本記事はVueの初心者を対象に、Vueでどうやって「Hello Vue!!」が出力されているかについて記しました。 また、掌田津耶乃氏の「Vue.js&Nuxt.js 超入門」を参考にしています。 本記事を読んでVueについて深く知りたくなったら是非、手に取って下さい。 Vueの基本的な型 Vue.jsは大きく分けて「出力の部分」と「スクリプト」の2か所から成り立っています。 これを「Hello Vue!!」を出力する方法例に見ていきましょう。 解説 表示(出力)の部分 上のコードのポイントは2つです。 ・[id=”app”]とcssセレクタを宣言している点。・{{message}}で変数のmessageに値を入れている点。ちなみにこの構文をムスタシェ構文という。（らしい笑） スクリプト 3行目～5行目：var data ={‥省略‥}：dataという変数にオブジェクトを作っています。 8行目～11行目：var …
