みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
Vue.jsの解説シリーズです。
今回はマスタッシュ構文内にJavaScript式を記述する方法について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- マスタッシュ構文内にJavaScriptを記述することができる
マスタッシュ構文内で関数を使おう
マスタッシュ構文内で関数を使うには以下のように記述します。
構文
{{ 変数.関数() }}見ての通りですが、通常のJavaScriptと同じような記述方法となります。
Vue.jsのマスタッシュ構文{{}}内はHTMLではなく、
JavaScriptの世界なのでJavaScriptのネイティブな関数が使用できます。
マスタッシュ構文内で三項演算子を使おう!
三項演算子とは
マスタッシュ構文内でJavaScriptを記述する際に
最もよく使用されるのは三項演算子です。
三項演算子とは、if-else文を1行で記述するショートハンドです。
三項演算子の構文はこうです
条件式 ? trueの場合の戻り値 : falseの場合の戻り値;// numberを宣言
let number = 100
console.log(number == 100 ? "100だよ" : "100やないよ")
// → 【出力結果】100だよ
// 上書き
number = 999
console.log(number == 100 ? "100だよ" : "100やないよ")
// → 【出力結果】100やないよ三項演算子について復習したい方はこちら！
マスタッシュ構文内で使おう!
①numberを少数第二位まで表示しよう
②先程の例文と同じものをVue.jsで記述しましょう。
See the Pen マスタッシュ構文内にJavaScript式を書こう by samehack (@samehack) on CodePen.
①toFixed関数が適用されて、100.00と表示されました。
固定小数点形式への変換を復習したい方はこちら!
②numberに100が入っているため、
“100だよ”と表示されました。
試しに、JSタブを選択し、numberの値を変えてみると
“100やないよ”と表示されることがわかります。
注意点
一点だけ注意点があるのですが、
マスタッシュ構文内には単一式のみのJavaScriptしか記述できません。
{{ if(number == 100) {
return "100だよ"
} else {
return "100やないよ"
} }}のような記述はエラーとなります。
まとめ
- マスタッシュ構文内にはネイティブなJavaScriptの関数が使用できる
- 三項演算子を用いて表示を切り替えることができる
- マスタッシュ構文内には単一式のみのJavaScriptしか記述できない
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
