【学習記録⑩】算出プロパティを用いてテキストフォーマットを適用する！

はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回は算出プロパティを用いてテキストフォーマットを適用してみます。
Vue.js 2ではfilterを用いて行うのが一般的だったようですがVue.js 3からはfilterはなくなり、算出プロパティか関数で行うことが推奨されているようです。

ちなみに算出プロパティと関数(methods)の違いについては学習記録①にて簡単に解説しています。

サンプルコード

それでは算出プロパティを用いて出力される文字にテキストフォーマットを適用してみましょう。
今回は出力される文字を大文字にしてみたいと思います。

Morning.vue

<template>
  <div>
    <div>{{ greetMessage }}</div>
    <div>{{ greetMessageToUpperCase }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greetMessage: "Good Morning!",
    };
  },
  computed: {
    greetMessageToUpperCase() {
      return this.greetMessage.toUpperCase();
    },
  },
};
</script>

App.vue

<template>
  <div>
    <morning></morning>
  </div>
</template>

<script>
import Morning from "./components/Morning.vue";

export default {
  components: {
    Morning
  },
};
</script>

Morning.vueの算出プロパティgreetMessageToUpperCaseが今回のテキストフォーマットを表しています。
（Vue.js 2だとfilters内に任意の関数を書き、その引数で任意の値が指定できるのですが、算出プロパティの場合はそれぞれの値ごとに作る必要があるのかな...？）

結果

以下のようにgreetMessageToUpperCaseを適用した部分が大文字になっています。

おわりに

今回は算出プロパティを用いたテキストフォーマットについて学びました。
次回は複数の同じ内容をまとめるmixinについてまとめていこうと思います！