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 アプレット wxs 日付と時刻処理の実装例

目次1. 日付までのタイムスタンプ2. UTCを北京時間に変換するWXS (WeiXin Scrip...

JavaScript 配列を走査する 5 つの方法

目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...

Gitlab実践チュートリアルでは、関連する設定操作にgit configを使用します。

この記事では、実際に発生した問題をもとに、git の設定に関する内容を紹介します。コマンド: git...

Mysqlはフィールドスプライシングのための3つの関数を実装している

データをオペレーションにエクスポートする場合、フィールドの結合は避けられません。MySQL でこれが...

Vueキャッシュ機能の使い方

目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...

ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します

プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...

Centos8 は kdc 暗号化に基づいて nfs を構築します

目次構成nfs サーバー (nfs.skills.com) nfs クライアント (client.s...

浮遊要素によって引き起こされる問題と解決策の詳細な説明

1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...

React.js フレームワーク Redux 基本ケースの詳細な説明

react.js フレームワーク Redux https://github.com/reactjs/...

Vueモバイル端末は左スライド編集と削除の全プロセスを実現します

序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...

ゲーム着物メモ問題の簡単な分析

本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...

Dockerコンテナのデータを復元する方法

プロジェクトのテスト環境データベースのデータが失われてしまったので、記録しておきたいと思います。当時...

DockerにRabbitMQを素早くインストールする方法

1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...

HTMLフレームワーク_Powernode Javaアカデミー

1. フレームワークブラウザのドキュメント ウィンドウには 1 つの Web ページ ファイルしか表...