1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ引数として使用できるようになりました。
ここで、attributeName は JavaScript 式として動的に評価され、結果の値が最終パラメータとして使用されます。たとえば、Vue インスタンスに値 "href" を持つデータ プロパティ attributeName がある場合、このバインディングは v-bind:href と同等になります。 同様に、動的パラメータを使用してハンドラー関数を動的イベント名にバインドすることもできます。
この例では、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. 計算されたプロパティテンプレート内の式は非常に便利ですが、主に単純な計算用に設計されています。テンプレートにロジックを詰め込みすぎると、煩雑になり、メンテナンスが困難になる可能性があります。例えば:
この時点で、テンプレートは単なる宣言型ロジックではなくなります。ここで必要なのは変数メッセージの逆文字列を表示することだと気づくまで、しばらく見なければなりません。この反転された文字列をテンプレート内の複数の場所に含める必要がある場合、処理がさらに難しくなります。 したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。 <!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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 一般的な Linux ディストリビューションのミラーソース構成の概要
>>: MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル
フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生するこ...
目次1. 日付までのタイムスタンプ2. UTCを北京時間に変換するWXS (WeiXin Scrip...
目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...
この記事では、実際に発生した問題をもとに、git の設定に関する内容を紹介します。コマンド: git...
データをオペレーションにエクスポートする場合、フィールドの結合は避けられません。MySQL でこれが...
目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...
プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...
目次構成nfs サーバー (nfs.skills.com) nfs クライアント (client.s...
1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...
react.js フレームワーク Redux https://github.com/reactjs/...
序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...
本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...
プロジェクトのテスト環境データベースのデータが失われてしまったので、記録しておきたいと思います。当時...
1. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...
1. フレームワークブラウザのドキュメント ウィンドウには 1 つの Web ページ ファイルしか表...