フィルター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が正常に起動しない原因と解決策を詳しく解説
nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...
メモリストレージエンジンに関する知識ポイントメモリ ストレージ エンジンは日常業務ではほとんど使用さ...
用語: 1. VM: 仮想マシンステップ: 1. Windows 10 に VirtualBox 6...
目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...
目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...
1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...
この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...
Dockerのインストール カール -fsSL https://get.docker.com -o...
Docker は、次の CentOS バージョンでの実行をサポートしています。 • CentOS 7...
JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...
目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...
1. MySQLデータベースをダウンロードするには、公式Webサイトにアクセスしてください:http...
2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...