Vee methodとcomputedの違い(最も明確な説明)

1375 ワード

html
   

        {{this.title.split('').reverse().join('')}}    

   

        {{methodsmessage()}}    

{{conputedmessage}}


js
var one = new Vue({
    el:"#vue-app-one",
    data:{
        title:"123a456a789a01b"
    },
    methods:{
        methodsmessage:function(){
            return this.title.split('a').reverse().join('');
        }
    },
    computed:{
        conputedmessage:function(){
            return this.title.split('a').reverse().join('');
        }
    }
});

結果:
b10a987a654a321
01b789456123
01bx789x456x123
VUEの説明:
  • メソッド上computedで属性を計算する方法は属性を使用する場合は()を付けないが、methods方式は使用時にメソッドのように使用し、()を付けなければならない.
  • キャッシュ上でも大きく異なり、computed計算属性を利用してconputedmessageとmessageをバインドし、messageが変化するたびにconputedmessageがトリガーされ、methods方式はページに入るたびにこの方法
  • を実行する
  • リアルタイム情報を利用する場合、例えば現在ページに入っている時間を表示するには、methods方式
  • パラメータの説明:1、splite(')は、文字列をある文字または他の文字で分割できます.配列を返します.2、reverse()このメソッドは、新しい配列を作成することなく、元の配列を変更します.この関数では、配列を逆順に並べ替えることができます.3、join(')メソッドは、配列内のすべての要素を文字列に入れるために使用されます.要素は、指定した区切り文字で区切られます.区切り方法join('');結果提示:最初の結果split(')とjoin(')は何も付けないで、字分割で配列を加えます.split('a')は、a分割に従って挿入配列を削除する、join('x')は配列間をx挿入して配列する.