VueJS入門: dataオプションにオブジェクトや配列要素を設定

この記事では、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（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する