VUEグローバルフィルターの概念と留意点、基本的な使い方

Vue.jsでは、いくつかの一般的なテキストフォーマットとして使用できるフィルタをカスタマイズすることができます。フィルタは、ヒゲの補間とv-bind式の2つの場所で使用することができます。

Vue.filter('the name of the filter when it is called in the future', the filter's handler function)

 <! -- When calling a filter, you need to use | to call it, | is called a pipe character -->
      <td>{{item.ctime | formatDate}}</td>

フィルターハンドラでは、最初の正式なパラメーターはすでに固定されており、常にパイプ文字の前の値になります。

// The data here is the value of item.ctime in front of the pipe character
Vue.filter('formatDate',function(data){

})
// There must be a return value in the filter

は vue ページ上の補間表現 文をレンダリングする

  <div id="app">
        <h3>{{mes}}</h3>
    </div>

<script src=". /js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                mes:"I'm a pessimist, pessimists do pessimistic things"
            }
        })
    </script>

まず、scriptタグでグローバルフィルターをカスタマイズし、独自のフィルター名を付けます。

 Vue.filter('setStr',function(data){
        })

フィルターにメソッドを定義する。

 Vue.filter('setStr',function(data){
            // There must be a return value in the filter
            return data.replace(/pessimistic/g,'cheerful')
            // Use the string manipulation method replace to replace some elements within a string with other elements, with g representing a global match
        })

そして、補間式の中で、フィルタ

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

この時点でページに移動して、効果を確認することができます。

基本的なフィルタが定義されている

メソッド内で置換される文字を与えずに、フィルタ関数内でフォームパラメータを与えることもできます

Vue.filter("strFormat",function(data,str){ // You can give a form parameter after data
            // In the filter, there must be a return value
            return data.replace(/pessimistic/g,str)
            // Use the string manipulation method replace to replace some elements within a string with other elements, g stands for global match
        })

次に、実際のパラメータを指定して再度呼び出します。

<div id="app">
        <h3>{{mes | setStr("careless")}}</h3>
    </div>

の結果を表示します。

また、フォーム・パラメータでデフォルト値を与え、実パラメータが与えられない場合はデフォルト値を、実パラメータが与えられる場合はその値を出力することができます

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

    <script src=". /js/vue.js"></script>
    <script>

        Vue.filter('setStr',function(data,str="fine"){
            // There must be a return value in the filter
            return data.replace(/pessimistic/g,str)
            // Use the string manipulation method replace to replace some elements within a string with other elements, with g representing a global match
        })

の結果が出ました。