[Vue.js]dataオプションにオブジェクトや配列を設定してみる

今回は、dataオプションにオブジェクトや配列要素を設定して、データを出力させてみます。今までの学習内容はこちらにまとまっていますので、時系列順で読んでいただくとわかりやすいかもしれません。

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。

dataオプション

オブジェクトや配列要素を設定する

データオプションには,で区切って複数のデータを設定することができる。

// data: 内だけを掲載しています
message: 'Hello Vue.js!', // ←こんな感じ
count: 0

オブジェクトを設定することもできます。

message: 'Hello Vue.js!',
count: 0,
user: {　//オブジェクト
    lastName: 'Yamada',
    firstName: 'Taro',
    prefecture: 'Tokyo'
}

配列も設定することができます。

message: 'Hello Vue.js!',
count: 0,
user: { //オブジェクト
    lastName: 'Yamada',
    firstName: 'Taro',
    prefecture: 'Tokyo'
},
colors: ['red', 'Green', 'blue'] //配列

これらを表示させてみる

表示部分はこんな感じで書くと出力されます。

<p>
   {{ count }} <!-- 変数 -->
</p>
<p>
   {{ user.prefecture }} <!-- オブジェクト -->
</p>
<p>
   {{ colors[1] }} <!-- 配列 -->
</p>

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。

まとめ

今回の部分はJavaScriptをかじったことがある方であれば、それほど理解が難しい部分ではありませんでしたね。次回からも頑張っていきましょう！