フィルター01. 何ですかフィルターは渡されたデータに対して必要な処理を実行し、処理結果を返します。
エクスポートデフォルト{ // フィルターを使用してローカルフィルターを作成します。フィルター:{ フィルター名(データ){ // 受信したデータを処理し、処理結果を返します} } } 02. やり方(1)フィルターを定義する
フィルター構造を通じて作成された エクスポートデフォルト{ // フィルターを使用してローカルフィルターを作成します。フィルター:{ フィルター名(データ){ // 処理結果を返す処理} } }
Vueインスタンスが作成される前に定義する必要がある Vue.filter(フィルタ名, (データ) => { // 何かをする 処理結果を返す}) 別のファイルにグローバルフィルターを作成し、必要なコンポーネントにインポートしてフィルターに登録します。 'vue' から Vue をインポートします // Vue.filter を通じてグローバルフィルターを作成する const filter1 = Vue.filter(filter name, (data) => { // 何かをする 処理結果を返す}) // エクスポート export { フィルター1 } //コンポーネント内で、filterimport { filter1 } from '@/utils/filters.js' を導入します。 エクスポートデフォルト{ // コンポーネント内のフィルターにフィルターを追加します // フィルターはフィルターの作成と登録の両方が可能です // フィルターに登録されたフィルターのみがフィルターとみなされます フィルター: { フィルター1 } } (2)使用方法
<div> {{ データ | フィルター }} </div>
フィルターは複数の並列使用をサポートしており、前者の処理結果は後者のパラメータとして渡されます。 <div> {{ データ | フィルター1 | フィルター2 }}</div> (3)フィルタパラメータ
03. フィルター関数をカプセル化する
// 関数を定義する const filterA = () => {} 定数フィルターB = () => {} // 関数オブジェクトをエクスポートする export { filterA, filterB }
'./filters.js' からフィルターとして * をインポートします。 //filters.js 内のメソッドを走査します Object.keys(filters).forEach(key => { Vue.filter(キー、フィルター[キー]) }) カスタムディレクティブ01. 何ですか
02. 基本概念(1)フック機能ディレクティブ定義オブジェクトは、次のフック関数を提供できます (すべてオプション)。
(2)パラメータコマンド フック関数には次のパラメータが渡されます。
// <div v-demo:left="100"></div> // ここでの左側はコマンドのバインディングオブジェクトの引数です // 100はコマンドのバインディングオブジェクトの値です Vue.directive('デモ',{ // el--バインドされた要素、つまり命令が配置されている要素を示しますbind(el,binding,vnode){ // この要素を直接処理できます el.style.position = 'fixed'; const s = ( binding.arg == 'left' ? 'left' : top ); el.style[s] = binding.value + 'px'; } }) 03. コマンド登録(1)グローバル登録Vue.directive() を介してグローバル ディレクティブを登録します。これには 2 つのパラメータが含まれます。
Vue.directive("ディレクティブ名", { 挿入: function(el){ // 何かをする } }) (2)現地登録Vueインスタンスにディレクティブオブジェクトデータを追加して、ローカルカスタムディレクティブを登録します。 エクスポートデフォルト{ ディレクティブ: { コマンド名: { 関数} } } 上記は、vue フィルターとカスタム命令の使用に関する詳細な内容です。vue フィルターとカスタム命令の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル
>>: Dockerが正常に起動しない原因と解決策を詳しく解説
目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...
mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...
この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参...
Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...
セレクタのグループ化h2 要素と段落の両方を灰色にしたいとします。これを行う最も簡単な方法は、次のス...
目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...
目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...
具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...
目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...
問題の説明:デスクトップ コンピューターとキャンパス ネットワークを使用して、有線モードでインターネ...
in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...
環境設定1: MySQLをインストールし、MySQLのbinディレクトリを環境変数に追加する環境設定...
目次最初に要約: 🌲🌲 序文: 🍬🍬公開🍬🍬 🍬🍬グローバル🍬🍬 🍬🍬ボールボックス🍬🍬 🎉🎉🎉結論...
<iframe src=”test.jsp” width=”100″ height=”50″ ...
疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...