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

この記事はUdemyの講座「Vue JS入門決定版!jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。

今回は、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をかじったことがある方であれば、それほど理解が難しい部分ではありませんでしたね。次回からも頑張っていきましょう!

あなたのホームページのお話をしませんか?

堅苦しい形式での打ち合わせや商談は苦手です。そうではなく、気楽にカフェや喫茶店で雑談するくらいの雰囲気で、あなたのホームページのお話をしませんか?(珈琲代は割り勘で)

岐阜市内近郊であれば直接ご対面で、そうでなければSkypeなどでどうですか?

この記事を書いた人

久野 晃司

Gifu WordPress Meetup共同オーガナイザー。岐阜を中心にWeb全般のお仕事をしているフリーランスです。趣味はサッカー観戦。専門は英国プレミアリーグ、マンチェスターユナイテッドを贔屓しています。英国滞在歴2年、日常英会話は大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。プログラミング教育に興味があります。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします