Vueにはローカルフィルターとグローバルフィルターの2種類のフィルターがあります。 フィルターは、いくつかの一般的なテキスト書式設定に使用できます。フィルターは、二重中括弧補間と v-bind 式の 2 つの場所で使用できます (後者は 2.1.0 以降でサポートされています)。フィルターは、JavaScript 式の最後に追加する必要があります。これは、「パイプ」記号で示されます (公式ドキュメント) <!-- 二重中括弧内 --> {{ メッセージ | 大文字 }} <!-- `v-bind` 内 --> <div v-bind:id="rawId | formatId"></div> 1. パラメータなしでグローバルフィルタを定義する Vue.filter('capitalize', function(msg){// msgは固定パラメータで、フィルタリングする必要があるデータです。if (!value) return '' 値 = value.toString() 戻り値.charAt(0).toUpperCase() + value.slice(1) }) 2. パラメータ付きのグローバルフィルタを定義する <div id="アプリ"> <p>{{ msg | msgFormat('クレイジー','--')}}</p> </div> <スクリプト> // msgFormat という名前の Vue グローバル フィルターを定義します Vue.filter('msgFormat', 関数(msg, arg, arg2) { // 文字列置換メソッドでは、最初のパラメータに文字列を書き込むだけでなく、通常の戻り値も定義できます msg.replace(/simple/g, arg+arg2) }) </スクリプト> 3. ローカルフィルター パラメータ付きおよびパラメータなしのローカル フィルターの定義と使用法は、グローバル フィルターの場合と同じです。唯一の違いは、ローカル フィルターが vue インスタンスで定義されていることです。それが動作する領域は、vueインスタンスによって制御される領域でもある // Vueインスタンスを作成し、ViewModelを取得します var vm = 新しい Vue({ el: '#app', データ: { メッセージ: 'メッセージ' }, メソッド: {}, //プライベートローカルフィルターを定義します。フィルターは現在のvueオブジェクトでのみ使用できます: { データフォーマット(メッセージ) { メッセージ+'xxxxx'を返します。 } } }); vueカスタムディレクティブVue には、v-model、v-show、v-html など、多くの組み込み命令がありますが、これらの命令では満足できない場合や、要素に特別な機能を追加したい場合があります。このような場合、Vue の非常に強力な機能であるカスタム命令を使用する必要があります。 始める前に、カスタム命令が解決する問題または使用シナリオは、通常の DOM 要素に対して低レベルの操作を実行することであるため、カスタム命令を盲目的に使用することはできないことを明確にする必要があります。 グローバル指令Vue.directive('focus', { // バインドされた要素が DOM に挿入されると... 挿入: 関数 (el) { // フォーカス要素 el.setAttribute('placeholder', 'これはカスタム命令によって追加されます') el.フォーカス() } }) ローカル指示ディレクティブ: { 集中: // 挿入された命令の定義: function (el) { el.フォーカス() } } } 使用
フック関数(両方ともオプション)bind: ディレクティブが要素に最初にバインドされるときに 1 回だけ呼び出されます。ここで、1 回限りの初期化セットアップを実行できます。 挿入: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在することを保証するだけで、必ずしもドキュメントに挿入されているわけではありません)。 update: コンポーネントの VNode が更新されたときに呼び出されますが、子 VNode が更新される前に発生することもあります。命令の値は変更されている場合と変更されていない場合があります。ただし、更新前と更新後の値を比較することで、不要なテンプレートの更新を無視することができます (詳細なフック関数のパラメータについては以下を参照してください)。 componentUpdated: 命令が配置されているコンポーネントの VNode とその子 VNode がすべて更新された後に呼び出されます。 unbind: ディレクティブが要素からアンバインドされたときに 1 回だけ呼び出されます。 使用方法とパラメータ順番に実行する //カスタムディレクティブ Vue.directive('focus', { バインド: 関数 (el, バインディング, vnode) { コンソールログ("1") }, 挿入: 関数 (el, バインディング, vnode) { コンソールログ("2"); }, 更新: 関数 (el, バインディング, vnode, oldVnode) { コンソールログ("3"); }, コンポーネント更新: 関数 (el、バインディング、vnode、oldVnode) { コンソールログ('4'); }, アンバインド: 関数 (el, バインディング, vnode) { コンソールログ('5'); } }) 以上がVueにおけるフィルターとディレクティブの詳しい説明です。Vueにおけるフィルターとディレクティブについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: Raspberry Pi msmtp と mutt のインストールと設定のチュートリアル
単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...
この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...
Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...
目次1. はじめに2. 導入環境ツール4. 展開プロセス要約する1. はじめにNextcloud は...
スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...
1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...
Vue 3.x プロジェクトの作成 npm init @vitejs/app my-vue-app ...
現在、プロジェクトの要件により、フォームの送信を制御し、送信前にデータを検証および処理するために j...
最近、VMware Horizon を導入してテストしましたが、そのコンソールにはデフォルトで ...
ステップ 1: 環境変数を構成する (解凍パス: G:\mysql\mysql-5.7.21-win...
目次序文SessionStorage と LocalStorage の紹介SessionStorag...
序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...
1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...
目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...
序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...