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 のインストールと設定のチュートリアル
目次序文関連資料Vue プロジェクトが 2 次元ハイパーグラフを導入ハイパーグラフ 2D ケース引用...
1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...
この記事の例では、JavaScriptでデジタル時計効果を実装するための具体的なコードを参考までに共...
図に示すように: ポートの使用状況を確認します: sudo netstat -apn | grep ...
目次背景1. dns-prefetch とは何ですか? 2. dns-prefetch を設定するに...
一般的に使用される方法は次の 4 つです。 1.locate()メソッドを使用する一般的な使用法: ...
MySQL で group by を使用すると常にエラー 1055 が発生するため、原因を確認する...
1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...
序文MySQL 5.1.6 以降、非常にユニークな機能であるイベント スケジューラが追加されました。...
1. Web ページをデザインするときに、幅を決定するのは非常に面倒な作業です。 jb51.net ...
この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...
この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介し...
必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...
ボタンは頻繁に使用されます。ここでは、イベント処理メソッドを整理し、実装方法が多数あることを発見しま...
データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...