Vue で動的パラメータと計算プロパティを使用する方法

1. 動的パラメータ

2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ引数として使用できるようになりました。

<a v-bind:[attributeName]="url"> …

ここで、attributeName は JavaScript 式として動的に評価され、結果の値が最終パラメータとして使用されます。たとえば、Vue インスタンスに値 "href" を持つデータプロパティ attributeName がある場合、このバインディングは v-bind:href と同等になります。

同様に、動的パラメータを使用してハンドラー関数を動的イベント名にバインドすることもできます。

<a v-on:[eventName]="doSomething"> …

この例では、eventName の値が "focus" の場合、v-on:[eventName] は v-on:focus と同等になります。

例：

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>動的パラメータ</title>
		<script src="vue.js"></script>
	</head>
	<本文>
		<div id='app7'>
			<span v-on:[event_name]='dosomething'>{{msg}}</span>
		</div>
	</本文>
	<スクリプト>
		var vm = 新しい Vue({
			el:"#app7",
			データ：{
				メッセージ:100、
				イベント名:'クリック'
			 },
			方法:{
				何かを行う:関数(){
					this.msg = this.msg + 1
				}
			}
		})
	</スクリプト>
</html>

2. 計算されたプロパティ

テンプレート内の式は非常に便利ですが、主に単純な計算用に設計されています。テンプレートにロジックを詰め込みすぎると、煩雑になり、メンテナンスが困難になる可能性があります。例えば：

{{ message.split('').reverse().join('') }}

この時点で、テンプレートは単なる宣言型ロジックではなくなります。ここで必要なのは変数メッセージの逆文字列を表示することだと気づくまで、しばらく見なければなりません。この反転された文字列をテンプレート内の複数の場所に含める必要がある場合、処理がさらに難しくなります。

したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>計算されたプロパティ</title>
		<script src="vue.js"></script>
	</head>
	<本文>
		<div id = 'app'>{{value_add}}</div>
	</本文>
	<スクリプト>
		var vm = 新しい Vue({
			el:"#アプリ",
			データ：{
				値:100
			},
			
			computed:{ //メソッド value_add:function(){ に似ています
					this.value + 100 を返す
				}
			}
		})
	</スクリプト>
</html>

要約する

Vue の動的パラメータと計算プロパティの使用に関するこの記事はこれで終わりです。Vue の動的パラメータと計算プロパティに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: