Vueステップ:Vue計算属性computedメソッド内パラメータ

1149 ワード

前期の博文「Vue進級(八十四):vueにおけるComputedとWatchの使用と区別」では、vueにおけるComputedとWatchの使用と区別について説明したが、その中で、computedが要素属性をどのように計算するかを紹介しただけで、どのように方法を説明していない.磁器のブログは主にcomputedの計算属性を利用して伝参する方法を説明しています.
シーンの導入
フロントエンドプロジェクトの開発過程で、コード値変換アプリケーションのシーンに遭遇し、異なるページに多重コード値変換が存在し、コード服用率を高めるために、コード値変換関数を共通関数として抽出することを考慮し、共通関数がトランスコード後の文字を返した後、どのようにページ面で合理的に展示しますか?メソッド呼び出しを試みたが、残念ながらトランスコード後の文字はページに表示されず、computed計算プロパティを使用することを考慮し、結果リストにcomputed計算プロパティを適用するには、リストデータのコード値を入力する必要があり、vueではcomputed計算プロパティを直接参照することはできません.
例えば、データフィルタリング機能として、閉パケット関数(匿名関数とも呼ばれる)を使用して、伝達パラメータの必要性がある場合に実現できます.
例:
前回のブログvueでは、最後の成績表練習で使用したフィルタ機能の実装をインストールします.


    {{item.username}}
    {{item.sex}}
    {{item.grade}}
    
          
    

computed    :

export default {
    name: 'Achievement',
    data () {
        return {
            ...
        }
    },
    methods: {
        ...
    },
    computed: {
        myfilter() {
            return function(index){
                return this.arr[index].username.match(this.name)!==null;         
            }           
        } 
    }
}