ホームページ > 記事 > ウェブフロントエンド > vue で計算されたプロパティを使用する方法
vue で計算されたプロパティを使用する方法
- 亚连オリジナル
- 2018-06-22 17:24:101605ブラウズ
この記事では主に 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:'#box',
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:'#box',
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('#box');は次と同等です:
var vm2 = new Vue({
el:'#box',
data:{},
methods:{}
});vm.$options -> カスタム プロパティとカスタム メソッドを取得します
それらを呼び出す必要がある場合は、$options を呼び出す必要があります。 :
var vm2 = new Vue({
aa:'1',//自定义属性
show:function () {
alert(1);
},
el:'#box',
data:{},
methods:{}
});
vm2.$options.show();
console.log(vm2.$options.aa);vm.$destroy -> オブジェクトを破棄します
vm.$log(); -> 以上が私がまとめたものです。未来のみんなへ。
関連記事:
WeChatミニプログラムで画像切り替え表示を実現するスワイパーコンポーネントの使い方Vueのデバッグツールvue-devtoolsについて(詳細)チュートリアル)
以上がvue で計算されたプロパティを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。