vue.jsのdata()メソッドの使いかた
データを保持(保存)しておき他から引っ張ってデータを使う
JavaScriptだと
const foo = bar
のようにデータを保持できる。
vueでは
data () メソッド内でオブジェクトを定義して、returnすることでデータの保持をして、vueのcomponentで必要なときにデータを引っ張ってきて使うことができる。
※componentは実際の表示をになう部品、テンプレートの役割をするファイルを入れておくフォルダのこと。
<script>
export default {
data() {
return {
name: 'hoge'
}
}
}
</script>
上記のdata()で定義したname: hoge を使うには、templateタグ内の任意のHTMLのところで
{{ name }}としたらhoge が表示されるようになっている。
例)
<template>
<div>{{ name }}</div>
</template>
→html出力結果
<div>hoge</div>
data () メソッドにオブジェクト形式のデータも保持できる
例)
export default {
data() {
return {
message: {
text: 'こんにちは',
user: {
name: 'のあ'
}
}
}
}
}
使い方
textの値を表示させたいときは、{{ message.text }}
nameの値を表示させたいときは、{{ message.user.name }}
のようにdata()に保持した値にアクセスし表示させることができる。
画像のソースなどをdata() で定義して使いたいときは、
HTML側でディレクティブのv-bindを使ってdata()で定義した値を読み込む。
例)
data() {
return {
message: {
text: '今日も良い天気ですね',
user: {
img: 'https://example.com/user_images/hoge.jpg',
name: 'のあ'
}
}
}
}
→HTMLタグ内で画像を表示
<template>
<div>
<img v-bind:src="message.user.img">
</div>
</template>
この記事が気に入ったらサポートをしてみませんか?