ホームページ > 記事 > ウェブフロントエンド > Vue でのメソッドと計算の違い
Vue でのメソッドと計算の違い
- php中世界最好的语言オリジナル
- 2018-03-28 11:48:451390ブラウズ
今回は、Vue でメソッドと計算の違いについて説明します。Vue でメソッドと計算を使用する場合の注意事項について説明します。実際のケースを見てみましょう。
新しい Vue の設定パラメーターの計算式とメソッドの両方で大量のロジック コードを処理できますが、いつどのプロパティを使用するか、Vue を正しく使用するために慎重に区別する必要があります。
computed は、名前が示すように、計算結果を返す必要があるため、多くのロジックを処理する必要があるが、最終的に最終結果を取得したい場合は、 を使用できます。メソッドと計算された属性の違いを説明します。違いについては、ここでまず、Vue 公式 Web サイトで計算された属性について説明していることを見ていきたいと思います。テンプレート内の式 は非常に便利ですが、実際には単純な操作にのみ使用されます。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。
例を見てみましょう:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html> 上記の場合、テンプレートはもはや単純かつ明確ではありません。これが逆メッセージであることに気づく前に、もう一度確認する必要があります。テンプレート内でメッセージを何度も反転表示したい場合、問題はさらに悪化します。このため、複雑なロジックでは計算されたプロパティを使用する必要があります。以下では、メソッドと計算結果を使用して比較します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>これら 2 つのメソッドを比較しました。返される結果は同じですが、計算された属性を計算するメソッドでは属性を使用するときに () を追加する必要はありませんが、methods メソッドはメソッドのように使用する必要があり、を追加する必要があります。
この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:
Vue2.0 がコンポーネント データの双方向バインディングを実装する方法
以上がVue でのメソッドと計算の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。