<!-- 過濾器： 定義：對要顯示的數據進行特定格式化之后再顯示（使用與一些簡單的邏輯）語法：1. 注冊過濾器：Vue.filter.(name, callback) 或 new Vue{filters: {}}2. 使用過濾器：{{xxx 過濾器名}} 或 v-bind:屬性 = "xxx | 過濾器名"備注：1. 過濾器也可以接收額外參數、多個過濾器也可以串聯2. 并沒有改變原本的數據，是產生新的對應的數據--> <div id="root"><!-- 計算屬性實現 --><h1>時間：{{fmtStr}}</h1><!-- 方法實現 --><h1>時間：{{getFormatTime()}}</h1><!-- 過濾器實現 --><h1>時間：{{time | timeFormater}}</h1><!-- 過濾器實現（傳參） --><h1>時間：{{time | timeFormater('YYYY年MM月DD日')}}</h1><!-- 過濾器實現（多次過濾） --><h1>時間：{{time | timeFormater('YYYY年MM月DD日') | mySlice}}</h1><!-- 屬性實現過濾 --><p :x="msg | mySlice"></p><input type="text" v-model="msg | mySlice"> </div>

全局的過濾器

// 全局的過濾器 Vue.filter('mySlice', value => {return value.slice(0, 5); })

Vue 實例的過濾器

filters: {timeFormater(value, str = 'YYYY年MM月DD日 HH時mm分ss秒') {return dayjs(value).format(str);} }

總結

以上是生活随笔為你收集整理的vue 过滤器 filters的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。