vue で計算されたプロパティを使用する方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-22 17:24:10

オリジナル

1629 人が閲覧しました

この記事では主に 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 サイトの他の関連記事を参照してください。