【vue】dataを表示する方法！オブジェクトや文字列を格納してdatamethodで表示してみよう

今回は、vue.jsでデータで定義したものを表示する方法について解説します。

この記事を読むことでわかることは3つ

Vueの公式ドキュメントは下記リンクをチェック

dataの定義

export default {
  data() {
    return {
      text : "データの出力"
    }
  },
}

「text」の部分が変数になるので、その中に入れたいテキストなどを入れます。

<p>{{ text }}</p>

htmlでデータを表示するときは、中括弧を2つ書くことでdetaの表示をすることができます。

lists: [{
  title: "タイトル",
  content: "コンテンツ",
}]

配列の定義は、[ ]でくくって上げればOKです。

<p>{{ lists[0].title }}</p>
<p>{{ lists[0].content }}</p>

配列なので、何番目のものを表示するかを明確にする必要があります。

なので今回は0番目のデータを表示させるために0を指定して表示させています。

もし、データが複数ある場合は、表示させたい配列の番号を指定してあげれば表示できるようになります。

vueでは簡単にデータの定義などができるので取っ掛かりやすいと思います。

私自身、普通のJavaScriptからではなくvue.jsから学び始めたので、JavaScriptの基礎を身に着けている方はかなり記述が楽になったと感じるでしょう。

created by Rinker

created by Rinker