Vue 過(guò)濾器filters及基本用法
更新時(shí)間：2017年12月26日 16:33:10 作者：孟繁貴
這篇文章主要介紹了Vue 過(guò)濾器filters的實(shí)例代碼以及vue過(guò)濾器的基本用法,需要的朋友可以參考下
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、說(shuō)明
過(guò)濾器內(nèi)是沒(méi)有this引用的，過(guò)濾器內(nèi)的this是undefined，所以不要在過(guò)濾器內(nèi)嘗試使用this引用組件實(shí)例的變量或者方法。
ps：下面看下Vue 過(guò)濾器的基本用法
// 注冊(cè)
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
// getter，返回已注冊(cè)的過(guò)濾器
var myFilter = Vue.filter('my-filter')
//在mustache中使用
{{ msg | uppercase }}
或
//在標(biāo)簽中使用 <input type="password" v-model="psw | validate">
總結(jié)
以上所述是小編給大家介紹的Vue 過(guò)濾器filters及基本用法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce
這篇文章主要介紹了vue以組件或者插件的形式實(shí)現(xiàn)throttle或者debounce，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值)
今天小編就為大家分享一篇Vue.js實(shí)現(xiàn)雙向數(shù)據(jù)綁定方法(表單自動(dòng)賦值、表單自動(dòng)取值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue使用docx-preview實(shí)現(xiàn)docx文件在線(xiàn)預(yù)覽功能全過(guò)程
文件在線(xiàn)預(yù)覽是目前移動(dòng)化辦公的一種新趨勢(shì),下面這篇文章主要給大家介紹了關(guān)于vue?docx-preview實(shí)現(xiàn)docx文件在線(xiàn)預(yù)覽功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue中axios實(shí)現(xiàn)數(shù)據(jù)交互與跨域問(wèn)題
這篇文章主要介紹了vue中axios實(shí)現(xiàn)數(shù)據(jù)交互與跨域問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
vue3+vite+移動(dòng)端webview打包后頁(yè)面加載空白問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+vite+移動(dòng)端webview打包后頁(yè)面加載空白問(wèn)題的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue——前端生成二維碼的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
解決Vue打包后訪(fǎng)問(wèn)圖片/圖標(biāo)不顯示的問(wèn)題
這篇文章主要介紹了 解決Vue打包后訪(fǎng)問(wèn)圖片/圖標(biāo)不顯示的問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值,需要的朋友可以參考下2019-07-07
vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開(kāi)網(wǎng)頁(yè)
最近在搭建自己的博客,前端采用Vue技術(shù),發(fā)現(xiàn)首頁(yè)加載速度非常之慢,常常達(dá)到10S左右,遂開(kāi)始優(yōu)化之旅,這篇文章主要給大家介紹了關(guān)于vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開(kāi)網(wǎng)頁(yè)的相關(guān)資料,需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁(yè)面功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁(yè)面功能,結(jié)合實(shí)例形式分析了基于vue.js的數(shù)據(jù)庫(kù)操作及頁(yè)面圖片顯示相關(guān)操作技巧,需要的朋友可以參考下2018-03-03