Vue 過濾器filters及基本用法
更新時間：2017年12月26日 16:33:10 作者：孟繁貴
這篇文章主要介紹了Vue 過濾器filters的實例代碼以及vue過濾器的基本用法,需要的朋友可以參考下
1、示例代碼
采用vue單文件組件，使用moment插件格式化日期
<template>
<div>
<h1>{{date | dateFormat}}</h1>
</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、效果
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">
總結
以上所述是小編給大家介紹的Vue 過濾器filters及基本用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
vue以組件或者插件的形式實現throttle或者debounce
這篇文章主要介紹了vue以組件或者插件的形式實現throttle或者debounce，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue.js實現雙向數據綁定方法(表單自動賦值、表單自動取值)
今天小編就為大家分享一篇Vue.js實現雙向數據綁定方法(表單自動賦值、表單自動取值)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue使用docx-preview實現docx文件在線預覽功能全過程
文件在線預覽是目前移動化辦公的一種新趨勢,下面這篇文章主要給大家介紹了關于vue?docx-preview實現docx文件在線預覽功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中axios實現數據交互與跨域問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
vue3+vite+移動端webview打包后頁面加載空白問題解決辦法
這篇文章主要給大家介紹了關于vue3+vite+移動端webview打包后頁面加載空白問題的解決辦法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-06-06
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue——前端生成二維碼的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了 解決Vue打包后訪問圖片/圖標不顯示的問題，本文給大家介紹的非常詳細，具有一定的參考解決價值,需要的朋友可以參考下2019-07-07
最近在搭建自己的博客,前端采用Vue技術,發(fā)現首頁加載速度非常之慢,常常達到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關于vue網站優(yōu)化實戰(zhàn)之秒開網頁的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue實現的上傳圖片到數據庫并顯示到頁面功能,結合實例形式分析了基于vue.js的數據庫操作及頁面圖片顯示相關操作技巧,需要的朋友可以參考下2018-03-03