【vue】 dataの値をHTMLで表示する
vueでは、表示するデータは主にdataメソッドの戻り値に組み込みます。ここに入れた値は、vue内で参照したり、HTMLに簡単に表示することが可能です。
dataの使い方
ここでは、dataをどのように使うかを紹介していきます。
まずは小さい構成で見ていきましょう。
const app = Vue.createApp({
data() {
return {
text: "Hello, Vue World!!",
foo: "bar",
hoge: 500,
}
}
});
<body>
<div id="app">
<p>{{ text }}</p>
<p>{{ foo }}</p>
<p>{{ hoge }}</p>
</div>
</body>
data内でreturnしていますね。ここのreturnで返す連想配列の値をhtml側で利用することができます。利用する際は{{ }}で囲みます。
結果はこのようになります。
See the Pen by Totori (@souki202) on CodePen.
数字も問題なく表示できています!
配列の中の値を表示
例えば、このようになっていたとします。
const app = Vue.createApp({
data() {
return {
foo: {
bar: "hoge",
hige: [
100,
200,
300,
]
}
}
}
});
連想配列の中に配列や連想配列が入っていますね。この場合、html側では、javascriptで変数を取るときと同じように利用できます。
<body>
<div id="app">
<p>{{ foo.bar }}</p>
<p>{{ foo["hige"][0] }}</p>
<p>{{ foo.hige[1] }}</p>
</div>
</body>
See the Pen vue1 array by Totori (@souki202) on CodePen.
リアクティブ性
dataに入っている値は全てリアクティブです。これは、dataの値を変更すると、自動的に表示する値も変わるということです。
この仕様は、次以降の章でdataの値を書き換えるときの挙動で把握していきましょう。
まとめ
dataの値をHTMLで利用する際は、配列や連想配列等でも、Javascriptで値を使うときと同じような感覚で取得することができます。
次はvue内でメソッドを呼び出してみましょう!
