Vue過濾器filters使用詳解

這次帶給大家Vue過濾器filters使用詳解，Vue過濾器filters使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

範例程式碼

採用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是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">

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼讓Angular裡的集合資料遍歷顯示

vue.js如何使用mint-ui輪播組件

#

以上是Vue過濾器filters使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！