Vue.js Filtersの簡単な使い方

Vue.js Filtersの簡単な使い方

vue.jsのFiltersを利用して、小文字を全て大文字に変換する簡単なサンプルコードです。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

プロジェクト作成

vueappという名前でプロジェクトを作成してます。

defaultを選択してます

filters使い方

filtersを利用して、小文字を全て大文字に変換します。

src/components配下のHelloWorld.vueを下記のように編集します

ブラウザから http://プライベートIP:8080にアクセスすると、 HelloWorld コンポーネントの「 Welcome to Your Vue.js App 」が全て大文字変換されます。

全てのコンポーネントで利用する場合は、src配下のmain.jsを下記のように編集します