今回は、vue.jsでデータで定義したものを表示する方法について解説します。
この記事を読むことでわかることは3つ
- dataの定義の方法について
- 配列のdataの定義の方法について
- html側でdataを表示させる方法
Vueの公式ドキュメントは下記リンクをチェック
https://v3.ja.vuejs.org/api/options-data.html
dataの定義

Vueの記述
export default {
data() {
return {
text : "データの出力"
}
},
}
「text」の部分が変数になるので、その中に入れたいテキストなどを入れます。
htmlの記述
<p>{{ text }}</p>
htmlでデータを表示するときは、中括弧を2つ書くことでdetaの表示をすることができます。
配列のデータの定義

Vueの記述
lists: [{
title: "タイトル",
content: "コンテンツ",
}]
配列の定義は、[ ]でくくって上げればOKです。
htmlの記述
<p>{{ lists[0].title }}</p>
<p>{{ lists[0].content }}</p>
配列なので、何番目のものを表示するかを明確にする必要があります。
なので今回は0番目のデータを表示させるために0を指定して表示させています。
もし、データが複数ある場合は、表示させたい配列の番号を指定してあげれば表示できるようになります。
まとめ
vueでは簡単にデータの定義などができるので取っ掛かりやすいと思います。
私自身、普通のJavaScriptからではなくvue.jsから学び始めたので、JavaScriptの基礎を身に着けている方はかなり記述が楽になったと感じるでしょう。
関連記事
コメント