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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js の計算プロパティ、監視プロパティ、ライフサイクルの詳細な説明
  • Vue の計算プロパティの紹介
  • Vue の計算プロパティとデータ取得方法
  • Vue の計算プロパティと監視プロパティ
  • Vue の計算プロパティと関数の選択

<<:  一般的な Linux ディストリビューションのミラーソース構成の概要

>>:  MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

推薦する

携帯電話番号の歩数記録を取得するWeChatアプレット

序文最近、小さなプログラムを開発しているときに、このような問題に遭遇しました。ユーザーが認証をクリッ...

Linux には make コマンドがありません (make: *** ターゲットが指定されておらず、makefile または make コマンドのインストール方法が見つかりません)

知らせ! ! !この状況は、実際には仮想マシンのインストール中に回避できます。次回仮想マシンをテスト...

JS 開発効率を上げる4つの超実践的なヒント

目次1. 短絡判定2. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...

ウェブデザインと制作の一般的な原則をまとめる

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

nginx サーバーでの 502 不正なゲートウェイ エラーの原因のトラブルシューティング

パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...

Vue における LocalStorage と SessionStorage の違いと使い方

目次LocalStorageとはSessionStorageとはLocalStorage と Ses...

バージョン管理ツール Rational ClearCase の紹介

Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...

Linux カーネル デバイス ドライバー 高度な文字デバイス ドライバーのメモ

/****************** * 高度な文字デバイス ドライバー ***********...

初心者向けに Docker に Jenkins をインストールする方法を詳しく説明したチュートリアル

Jenkins はオープンソース ソフトウェア プロジェクトです。Java をベースに開発された継続...

MySQL データテーブルのパーティション戦略と利点と欠点の分析

目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...

SEATAトランザクションサービスDockerのデプロイ手順の詳細説明

1. データベース認証ステートメントを作成する > データベース seata を作成します。 ...

Divの境界と透明度に関する設定

フレーム:スタイル=”border-style:solid;border-width:5px;bor...

SQLはLeetCodeを実装します(180.連続した数字)

[LeetCode] 180. 連続した数字少なくとも 3 回連続して出現するすべての数字を検索す...

js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する

この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...