この記事では、Vue.jsで、dataオプションにオブジェクトや配列要素を設定して、テンプレートから使う方法について説明いたします。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。
完成形
完成形の動作としては下記になります。
Vueインスタンス側のコード
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
count: 1,
// Object
user: {
lastName: 'Yamada',
firstName: 'Taro',
prefecture: 'Tokyo'
},
// Array
colors: ['Red', 'Green', 'Blue'],
}
})
まず、Vueインスタンスから見ていきましょう。
以前のレクチャーで、dataオプションに、messageプロパティを定義して、値を設定する方法について学習しました。
データオプションには、カンマ区切りで複数のプロパティを定義するとができます。
数字も使えます。できます。
count : 0
Objectを設定することができます。
ユーザーを管理するObjectを作ります。
オブジェクト名はuserで、
名字、名前、居住地の都道府県をプロパティにもつとします。
lastName Yamada, FirstName Taro, プリフィクスチャー Tokyo
とします。
次に、配列を作成します。
配列名はcolorsで、値にRed, Green, Blueを設定してみます。
配列は [ (ブラケット、日本語でいうと、各カッコ で囲むことで表現できます。
テンプレート側のコード
次に、テンプレート側から、データオプションの各値を使用して、画面に描画してみましょう。
<div id="app">
{{ message }}
{{ count}}
{{ users.prefecture }}
{{ colors[1] }}
</div>
まずは、文字列、数も同様です。
次に、オブジェクト、プリフィクスチャーの値を表示してみましょう。
オブジェクト名、userのあとに、ドットとして、prefectureとします。
これで、Tokyoと表示できました。
次に、配列、この、Greenを表示してみましょう。
colos ブランケットで囲って、配列のindexを指定します。
Redが0で、Greeが1、Blueが2なので、1を指定します。
Greenと表示されました。
動画で学習する
おわりに
この記事では、dataオプションにオブジェクトや配列要素を設定して、
テンプレートから使う方法について学習しました。
動画でプログラミング入門をしよう
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
