Vue的filters過(guò)濾器怎么使用

本篇內(nèi)容主要講解“Vue的filters過(guò)濾器怎么使用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue的filters過(guò)濾器怎么使用”吧!

1、示例代碼

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

<template>
 <div>
  <h2>{{date | dateFormat}}</h2> 
 </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、說(shuō)明

過(guò)濾器內(nèi)是沒(méi)有this引用的，過(guò)濾器內(nèi)的this是undefined，所以不要在過(guò)濾器內(nèi)嘗試使用this引用組件實(shí)例的變量或者方法。

ps：下面看下Vue 過(guò)濾器的基本用法

// 注冊(cè)
Vue.filter('my-filter', function (value) {
 // 返回處理后的值
})
// getter，返回已注冊(cè)的過(guò)濾器
var myFilter = Vue.filter('my-filter')

//在mustache中使用
{{ msg | uppercase }}

或

//在標(biāo)簽中使用
<input type="password" v-model="psw | validate">

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

到此，相信大家對(duì)“Vue的filters過(guò)濾器怎么使用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！