パソ君
・vue.jsのマスタッシュ構文はどうやって使うの？
こんな疑問にお答えします。
Vue.jsでは「{{ 変数名 }}」のように書くことで、Vueに定義した変数を反映することができます。
この{{}}が口ひげに見えることで、マスタッシュ構文と言われるそう。
今回は自分用のメモとして、このマスタッシュ構文の使い方を記述していきます。
ジト
参考にどうぞ
ということで、この記事では「Vue.jsのマスタッシュ構文の使い方」について解説していきます！
この記事でわかること
Vue.jsのマスタッシュ構文の使い方
目次
【解説】Vue.jsのマスタッシュ構文の使い方【コードあり】
マスタッシュ構文の使い方例がこちら↓
- 通常の使い方
- 配列での表示
- オブジェクトでの表示
- 式での表示
順に解説してきます。
まずは通常の書き方です。
<div id="app">
<p>{{ message }}</p>
</div>const app = Vue.createApp({
data: () => ({
message: 'Hello'
})
}).mount('#app'){{変数名}}を記述して、定義された「Hello」という文字列を反映します。
次が配列を使ったマスタッシュ構文の使用例です。
<div id="app">
<p>{{ message[0] }}</p>
<p>{{ message[1] }}</p>
<p>{{ message[2] }}</p>
<p>{{ message[3] }}</p>
</div>const app = Vue.createApp({
data: () => ({
message: ['おはよう', 'こんにちは', 'こんばんは', 'おやすみ']
})
}).mount('#app'){{変数名[配列番号]}}を用いて、定義した配列を出力します。
次がオブジェクトを使ったマスタッシュ構文の使用例です。
<div id="app">
<p>{{ message.name }}</p>
<p>{{ message.day }}</p>
<p>{{ message.greeting }}</p>
</div>const app = Vue.createApp({
data: () => ({
message: {
name: '田中さん',
day: '今日も',
greeting: 'よろしくお願いします'
}
})
}).mount('#app'){{変数名.プロパティ名}}を用いて、定義したオブジェクトの値を出力します。
次が式でのマスタッシュ構文の使用例です。
<div id="app">
<p>{{ num + 10 }}回目のチャレンジです</p>
<p>{{ num > 100 ? 'おはよう' : 'こんにちは' }}</p>
</div>const app = Vue.createApp({
data: () => ({
num: 50
})
}).mount('#app')この例では定義した数値に対して、式を用いて出力しています。
【解説】Vue.jsのマスタッシュ構文の使い方【コードあり】：まとめ
- {{ 変数名 }}のように書くことで要素を呼び出せる
- オブジェクトや配列も反映可能
- 式で出力も可能
ジト
Vueでマスタッシュ構文を使う時はためしてみてね！
