Vue 中filters過濾器如何使用

發(fā)布時(shí)間：2021-06-23 16:09:20 來源：億速云閱讀：164 作者：Leah 欄目：web開發(fā)

這篇文章給大家介紹Vue 中filters過濾器如何使用，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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、效果

Vue 中filters過濾器如何使用

3、說明

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

ps：下面看下Vue 過濾器的基本用法

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

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

或

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

關(guān)于Vue 中filters過濾器如何使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

Vue 中filters過濾器如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽