ホームページ > 記事 > ウェブフロントエンド > vue で計算されたプロパティを使用する方法

vue で計算されたプロパティを使用する方法

小云云オリジナル: 2017-12-12 13:07:122181ブラウズ

計算プロパティ

テンプレート内の式は非常に便利ですが、実際には単純な操作にのみ使用されます。テンプレートはビューの構造を記述するために使用されます。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。これが、Vue.js がバインド式を 1 つの式に制限する理由です。複数の式のロジックが必要な場合は、計算されたプロパティを使用する必要があります。この記事では主に vue の計算属性の使用方法と vue インスタンスのメソッドの例を紹介します。皆さんの参考になれば幸いです。

vue計算属性

ビジネスコードの一端の実行結果に基づいて属性の値を返したい場合、計算属性computedを使用できます

計算属性は次の関数です。 get メソッドと set メソッドを使用した結果、get メソッド、戻り値が必要、戻り値が必要

<script src="lib/vue.js"></script> 
 
<body> 
<p id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</p> 
</body> 
<script> 
  var vm = new Vue({ 
    el:&#39;#box&#39;, 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:function () { 
        //业务代码 
        return this.a+1; 
      } 
    } 
  }); 
  /**这样直接改属性的值不行的，需要调用计算属性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
  }; 
</script>

計算されたプロパティの set/get メソッド:

<script src="lib/vue.js"></script> 
 
<body> 
<p id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</p> 
</body> 
<script> 
  var vm = new Vue({ 
    el:&#39;#box&#39;, 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:{ 
        get:function () { 
          return this.a+1; 
        }, 
        set:function(val){ 
          this.a = val; 
        } 
      } 
    } 
  }); 
  /**这样直接改属性的值不行的，需要调用计算属性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
    //默认调用计算属性的set方法 
  }; 
</script>

vue の簡単なメソッドインスタンス

vm が作成されます。 vue インスタンスオブジェクトの名前

vm.$el -> は要素です

vm.$data -> は data

vm -> です。 vue オブジェクトをノードオブジェクトにマウントします

例:

var vm2 = new Vue({ 
    data:{}, 
    methods:{} 
  }).$mount(&#39;#box&#39;);

は次と同等です:

var vm2 = new Vue({ 
    el:&#39;#box&#39;, 
    data:{}, 
    methods:{} 
  });

vm.$options -> カスタムプロパティ、カスタムメソッドを取得します

vue インスタンスはプロパティとメソッドをカスタマイズできます。呼び出す必要がある場合は、$options を呼び出す必要があります。たとえば、次のようになります。 ); -> 現在のデータのステータスを確認します

vue で計算されたプロパティを使用する方法

関連記事