Vue中關於過濾器filters的用法

這篇文章主要介紹了Vue 過濾器filters的實例程式碼以及vue過濾器的基本用法,需要的朋友可以參考下

1、範例程式碼

採用vue單一檔案元件，使用moment外掛程式格式化日期

<template>
 <p>
  <h1>{{date | dateFormat}}</h1> 
 </p>
</template>
<script>
 import moment from &#39;moment&#39;;
 import &#39;moment/locale/zh-cn&#39;;
 moment.locale(&#39;zh-cn&#39;);
 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">

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用jQuery CSS如何實作table表格

如何使用Vue實作註解框架

有關v4 history不能存取的原因

為何response.body().string()不能實作多次呼叫？

使用Vue元件如何實作行事曆（詳細教學）

#利用webpack搭建vue腳手架#

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