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. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...
目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...
パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...
目次LocalStorageとはSessionStorageとはLocalStorage と Ses...
Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...
/****************** * 高度な文字デバイス ドライバー ***********...
Jenkins はオープンソース ソフトウェア プロジェクトです。Java をベースに開発された継続...
目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...
1. データベース認証ステートメントを作成する > データベース seata を作成します。 ...
フレーム:スタイル=”border-style:solid;border-width:5px;bor...
[LeetCode] 180. 連続した数字少なくとも 3 回連続して出現するすべての数字を検索す...
この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...