Vue の計算プロパティの紹介

1. 計算プロパティとは何ですか?

テンプレート内の式は非常に便利ですが、主に単純な計算用に設計されています。テンプレートにロジックを詰め込みすぎると、煩雑になり、メンテナンスが困難になる可能性があります。

例えば：

<div id="アプリ">
  {
<!-- -->{ message.split('').reverse().join('') }}
</div>

この時点で、テンプレートは単なる宣言型ロジックではなくなります。代わりに、補間式で文字列を直接反転します。反転した文字列を複数の場所で使用する場合、このように記述するのは面倒で、消費量が増えます。したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。

2. 計算プロパティの構文

計算された{

function () {return //値を返す必要があります。 }通常、この関数は get 関数です}

3. 例

上記の例では、次のように記述できます。

<div id="アプリ">
        <p>元の文字列: {
<!-- -->{mes}}</p>
        <p>反転した文字列: {
<!-- -->{reverseMes}}</p>
    </div>

vm = new Vue({
            el:'#app',
            データ：{
                mes:'こんにちは'
            },
            計算: {
                逆Mes(){
        // 計算属性には戻り値が必要です return this.mes.split('').reverse().join('')
                }
            }
        })

結果を表示:

ここでは、 vueインスタンスのcomputedプロパティに関数を定義します。関数の戻り値は必要な結果であり、補間式で直接呼び出してレンダリングできます。

たとえば、プロパティを計算すると、単語の最初の文字が大文字になります。

<div id="アプリ">
        <p>元の文字列: {
<!-- -->{名前}}</p>
        <p>最初の文字を大文字にします: {
<!-- -->{大文字へ}}</p>
    </div>

Vue インスタンスのcomputedプロパティで、文字列の最初の文字を取得して大文字に変換し、分割後の残りの文字と連結することで、計算プロパティをカスタマイズします。

el:"#アプリ",
            データ：{
                名前:'トム'
            },

            // 計算プロパティ computed:{
            // カスタム計算プロパティ toUpperCase(){
                this.name.charAt(0).toUpperCase().concat(this.name.slice(1,3)) を返します。
              }
            }

出力は次のようになります。

計算プロパティには、見落とされがちな非常に実用的なヒントが 2 つあります。1つは、計算プロパティが他の計算プロパティに依存する可能性があること、もう 1 つは、計算プロパティが現在の Vue インスタンスのデータだけでなく、他のインスタンスのデータにも依存できることです。

例えば：

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
vm1 = new Vue({
            el:'#app1',
            データ：{
                mes:'こんにちは'
            }
        })

        vm2 = new Vue({
            el:'#app2',
            計算: {
                逆Mes(){
                    // インスタンス vm1 のデータセンターの mes を使用して文字列を反転します。 return vm1.mes.split('').reverse().join('')
                }
            }
        })

結果を表示:

インスタンスvm1とvm2のデータは、プロパティを計算するためにも使用できます。

カスタム計算プロパティは、補間式で使用されるだけでなく、 v-bind : 属性バインディングでスタイルの変更などを実行するためにも使用できます。

Vue の計算プロパティの導入に関するこの記事はこれで終わりです。Vue の計算プロパティに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: