Vue 過濾器filters及基本用法

來源：懂視網責編：小采時間：2020-11-27 22:22:51

Vue 過濾器filters及基本用法

Vue 過濾器filters及基本用法:1、示例代碼采用vue單文件組件，使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment fr

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue 過濾器filters及基本用法:1、示例代碼采用vue單文件組件，使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment fr

1、示例代碼

采用vue單文件組件，使用moment插件格式化日期

<template>
 <div>
 <h1>{{date | dateFormat}}</h1> 
 </div>
</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>

2、效果

3、說明

過濾器內是沒有this引用的，過濾器內的this是undefined，所以不要在過濾器內嘗試使用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">

總結

以上所述是小編給大家介紹的Vue 過濾器filters及基本用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue 過濾器filters及基本用法

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用 VUE 過濾器

熱門焦點

Vue 過濾器filters及基本用法

Vue 過濾器filters及基本用法

Vue 過濾器filters及基本用法

最新推薦

猜你喜歡

熱門推薦