コース: Vue.js 入門

データの項目数を示す

コース: Vue.js 入門

1ヶ月の無料トライアルを開始 法人向けサービス

データの項目数を示す

“

このレッスンではリストデータの すべての項目数を調べて その数をページに 表示したいと思います。 現在開いている HTML ドキュメント なんですけど これは Todo リストという ことになっています。 データは Vue のオブジェクトの中に data プロパティでここですね。 todos ということで 配列に項目が入っています。 プロパティが２つそれぞれ 設定されていますけれど その配列から li 要素ですけれど v-for ですね。 データを取り出して そして text のプロパティの文字を この span に表示します。 それから done の値なんですが、これは チェックボックスをオンにするかオフにするか ということになっていて その値が class。 v-bind:class でクラスの 設定につながっています。 ですからチェックの付いた項目と 付いてない項目について スタイルが変わってくる。 そしてチェックボックスの方では そのプロパティをバインドしています。 これで Todo リストが できているんですけれど Todo リストにはもう１つ input 要素があります。 この input 要素は todoText という データとバインドされています。 こちらですね。 v-model でバインドしてあるんですけれど ボタンをクリックすると v-on:click で addTodo というメソッドが呼び出されて、 これはこの配列の中に input 要素に入力したテキストを push して 項目を加えるということになっています。 ではこの動き、確認してみましょう。 ［ファイル］＞ ［リアルタイムプレビュー］です。 まず２つの項目が リストとして表示されています。 そしてチェックボックスですね。 オンになると、この 取り消し線が付いた ちょっとグレーがかった 文字になっています。 外せばスタイルが変わる。 それから入力フィールドに 「Vue.js のサンプルをつくる」 ということで［追加］ボタンを押しますと データが追加されます。 ちゃんと動いてますね。 ここに１つデータを 加えたいと思うんですが 全部で何件というのを、この Todo の タイトルの下に表示したいと思います。 タイトルの下に表示する テキストを加えたいと思うんですけれど 要素としてちょっとたたみましょう。 ul をたたんで、 この Todo の下ですね。 h2 の要素の下に p 要素を加えましょう。 ここに表示したいと思います。 どんな感じかというと 全部でと、 「全何件」というふうに 表示したいと思います。 そしてこの「何件」の「何」ですね。 ここを数字にしたいのですが どうやって調べたらいいかというと 項目はこの配列ですね。 todos の中に入っています。 そしてこの配列の データの件数、 length プロパティを 調べればいいですね。 ということですので、 ここを バインドするために 二重波括弧にして todos.length と。 length プロパティにアクセスして その値を取り出します。 それがこの「全」と 「件」の間に入るはずですね。 では確認しましょう。 ［ファイル］＞［保存］して ［リアルタイムプレビュー］です。 「全２件」となりましたね。 項目、追加してみましょう。 「Vue.js のサンプルをつくる」 ［追加］を押します。 「全３件」ということで データの件数を調べて その値がバインドされて リアルタイムに変わっている。 このレッスンではリストデータの すべての項目数を調べて その数をページに表示しました。 その場合、項目というのは この変数の配列に入ってるわけですから 二重波括弧で参照をして その配列の length プロパティをとって バインドすればいい ということでした。

目次