フィルターを使い簡単にフォーマッティングする

src/components/Home.vue

@@ -1,7 +1,11 @@
 <template>
-  <p v-border:solid.round.shadow="{ width: '5px', color: 'red' }">
-    {{ tmpData }}
-  </p>
+  <div>
+    <p v-border:solid.round.shadow="{ width: '5px', color: 'red' }">
+      {{ tmpData }}
+    </p>
+    <h2>{{ title | upperCase }}</h2>
+    <h4>{{ subTitle | upperCase }}</h4>
+  </div>
 </template>
 
 <script>
@@ -18,12 +22,22 @@ export default {
   data() {
     return {
       tmpData: "hello",
+      title: "Welcome to Tokyo",
+      subTitle: "Tokyo is a great city",
     };
   },
+  // フィルターを使わずcomputedでやろうとすると以下のように1つ1つに対してcomputedが必要で手間
+  // フィルターを定義し、パイプ(|)でフィルターを指定するとフォーマッティングが簡単にできる（Angularのパイプと同じ）
+  // computed: {
+  //   upperCaseTitle() {
+  //     return this.title.toUpperCase();
+  //   },
+  //   upperCaseSubTitle() {
+  //     return this.subTitle.toUpperCase();
+  //   },
+  // },
   directives: {
     border(el, binding) {
-      // this.tmpData = "こんにちは"; <- カスタムディレクティブではthisは使えないので注意！
-      // Error in directive border bind hook: "TypeError: Cannot set property 'tmpData' of undefined" という警告と、TypeError: Cannot set property 'tmpData' of undefinedというエラーが出る
       el.style.borderWidth = binding.value.width;
       el.style.borderColor = binding.value.color;
       el.style.borderStyle = binding.arg;

src/main.js

@@ -8,18 +8,10 @@ import "bootstrap/dist/css/bootstrap.min.css";
 Vue.config.productionTip = false
 Vue.component('LikeNumber', LikeNumber);
 
-// Vue.directive('border', (el, binding) => {
-//   el.style.borderWidth = binding.value.width;
-//   el.style.borderColor = binding.value.color;
-//   el.style.borderStyle = binding.arg;
-
-//   if (binding.modifiers.round) {
-//     el.style.borderRadius = '0.5rem';
-//   }
-//   if (binding.modifiers.shadow) {
-//     el.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.5)';
-//   }
-// });
+// テキストなどであるフォーマットにしたいという時にはフィルターを使うと簡単
+Vue.filter('upperCase', (value) => {
+  return value.toUpperCase();
+})
 
 new Vue({
   render: h => h(App),