在 Vue 中 加入 filter 的 method

  1. 在 Vue 中 加入 filter 的 method
    1. 第一種
    2. 第二種

在 Vue 中 加入 filter 的 method

第一種

加在 component 裡

src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <p>{{ text | toUppercase | to-lowercase}}</p>
</template>

<script>
    export default {
      data () {
        return {
          text: 'hello text'
        }
      },
      filters: {
        toUppercase (value) {
          return value.toUpperCase();
        }
      }
    }
</script>

第二種

加在全域

main.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from "vue";
import App from "./App.vue";

Vue.filter("to-lowercase", function(value) {
  return value.toLowerCase();
});

new Vue({
  el: "#app",
  render: h => h(App)
});
發表於 
tags:
  • { vue }
  • { filter }