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、說明
過濾器內(nèi)是沒有this引用的，過濾器內(nèi)的this是undefined，所以不要在過濾器內(nèi)嘗試使用this引用組件實例的變量或者方法。
ps：下面看下Vue 過濾器的基本用法
// 注冊
Vue.filter('my-filter', function (value) {
// 返回處理后的值
})
// getter，返回已注冊的過濾器
var myFilter = Vue.filter('my-filter')
//在mustache中使用
{{ msg | uppercase }}
或
//在標(biāo)簽中使用 <input type="password" v-model="psw | validate">
總結(jié)
以上所述是小編給大家介紹的Vue 過濾器filters及基本用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue如何實現(xiàn)自定義步驟條問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue單頁面打包文件大？首次加載慢？nginx帶你飛，從7.5M到1.3M蛻變過程(推薦)
這篇文章主要介紹了vue單頁面打包文件大？首次加載慢？nginx帶你飛，從7.5M到1.3M蛻變過程,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue路由跳轉(zhuǎn)傳參數(shù)的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue中computed和watch有哪些區(qū)別，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
本文介紹了VUE中組件的基本使用以及個人對VUE組件的理解,希望能幫助到大家2019-02-02
這篇文章主要介紹了vue項目優(yōu)化首評加載速度，以及白屏?xí)r間過久的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要介紹了Vue項目依賴包安裝及配置過程,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
在本篇文章里我們給大家分享了關(guān)于vue中使用echarts圖表的實現(xiàn)方法，有興趣的朋友們學(xué)習(xí)下。2018-10-10
這篇文章主要介紹了Vuex 注入 Vue 生命周期的過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
關(guān)于vue路由緩存清除在main.js中的設(shè)置
今天小編就為大家分享一篇關(guān)于vue路由緩存清除在main.js中的設(shè)置，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11