ホームページ > 記事 > ウェブフロントエンド > Vue フィルターの使用方法の詳細な説明
今回は、Vueフィルターフィルターの使用方法について詳しく説明します。Vueフィルターを使用する際の注意事項は何ですか?実際の事例を見てみましょう。
サンプルコード
vue 単一ファイル コンポーネントを使用し、moment プラグインを使用して日付をフォーマットします
<template> <p> <h1>{{date | dateFormat}}</h1> </p> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { date: new Date() } }, filters: { dateFormat(val) { return moment(val).calendar(); } } } </script>
手順
フィルターには this 参照 がありません。フィルター内の this は未定義であるため、フィルター内のコンポーネント インスタンスの 変数 メソッドを参照するために this を使用しないでください。
ps: Vue フィルターの基本的な使用法を見てみましょう
// 注册 Vue.filter('my-filter', function (value) { // 返回处理后的值 }) // getter,返回已注册的过滤器 var myFilter = Vue.filter('my-filter') //在mustache中使用 {{ msg | uppercase }}
または
//在标签中使用 <input type="password" v-model="psw | validate">
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
Angular でコレクション データをトラバースして表示する方法
vue.js mint-ui カルーセル コンポーネントの使用方法
以上がVue フィルターの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。