溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue.js 允許自定義過濾器，一般可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示：
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>
可以在一個組件的選項中定義私有的過濾器：
filters: {
dateFormat： (dataStr) => {
var time = new Date(dataStr);
function timeAdd0(str) {
if (str < 10) {
str = '0' + str;
}
return str
}
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
}
}
或者在創建 Vue 實例之前全局定義過濾器：
Vue.filter('dateFormat', (dataStr) => {
var time = new Date(dataStr);
function timeAdd0(str) {
if (str < 10) {
str = '0' + str;
}
return str
}
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
})
但是如果想要在v-model或者v-text中使用過濾器是不生效的，可以參考以下寫法：
<template>
<div id="app">
<input type="text" v-model="userDate" />
<span>{{ userDate | dateFormat }}</span>
</div>
</template>
<script>
export default {
data: {
return {
userDate:'',
}
},
filters: {
dateFormat： (dataStr) => {
var time = new Date(dataStr);
function timeAdd0(str) {
if (str < 10) {
str = '0' + str;
}
return str
}
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s);
}
}
}
</script>
<style>
</style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
