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

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

亚连
亚连オリジナル
2018-06-22 17:24:101615ブラウズ

この記事では主に vue の計算プロパティの使用方法と vue インスタンスのメソッドの例を紹介します。編集者がそれを参考として共有します。エディターをフォローして見てみましょう

この記事では、vue の計算プロパティの使用方法と vue インスタンスのメソッドの例を紹介します。詳細は次のとおりです:

計算プロパティ

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

vue 計算属性

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

計算属性は結果を持つ関数です。 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.$mount -> 例:

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

は次と同等です:

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

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

それらを呼び出す必要がある場合は、$options を呼び出す必要があります。 :

var vm2 = new Vue({ 
   aa:&#39;1&#39;,//自定义属性 
   show:function () { 
     alert(1); 
   }, 
   el:&#39;#box&#39;, 
   data:{}, 
   methods:{} 
 }); 
 vm2.$options.show(); 
 console.log(vm2.$options.aa);

vm.$destroy -> オブジェクトを破棄します

vm.$log(); -> 以上が私がまとめたものです。未来のみんなへ。

関連記事:

WeChatミニプログラムで画像切り替え表示を実現するスワイパーコンポーネントの使い方

JavaScriptで円形広告ストリップを実装する方法

Vueのデバッグツールvue-devtoolsについて(詳細)チュートリアル)

以上がvue で計算されたプロパティを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。