filtersの使用方法について

Question

こちらサイトにて、filtersの使い方について調べていたのですが、分からない箇所があり、質問させて貰いました。
具体的には、以下のコードについてなのですが、{{ msg | uppercase }}こちらの縦線(|)はどのような意味になりますでしょうか...?
uppercaseを通したい場合は、uppercase(msg)こちらのような記述になるのではないのでしょうか...?

<template>
  <div class="hello">
    <h1>{{ msg | uppercase }}</h1>    
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  filters: {
    uppercase: function (value) {
        return value.toUpperCase()
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

こちら、疑問点につきまして、ご助言の程頂けましたら幸いです。

Answer 1

{{ msg | uppercase }}は、実質{{ uppercase(msg) }}を意味するVue.js独自の記法になります。
|より前の式の値を受け取るというもので、例えば{{ value | filterA | filterB }}のように書くと、まずvalueにfilterAが適用され、次にそのfilterAが適用された値にfilterBが適用されます。
これも実質{{ filterB(filterA(value)) }}と同じです。

ただ、filtersはVue3で削除されたので、覚える必要はないかと思います。

Comments

[jjj001]

ご回答ありがとうございます。
そういった独自の記法だったのですね。
>ただ、filtersはVue3で削除されたので、覚える必要はないかと思います。
そうなのですね！
しかし、現在はVue2を使用しております為、filterの記法が出てきた際に、理解できるよう参考程度に頭に入れておりたいと思います！