vue2 v-model/v-text 中使用過濾器的方法示例
更新時間：2019年05月09日 14:54:29 作者：Liu_xiaoqing
這篇文章主要介紹了vue2 v-model/v-text 中使用過濾器的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue.js 允許自定義過濾器，一般可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 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);
}
}
或者在創(chuàng)建 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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動
本文主要介紹了vue+antDesign實現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要是來和大家探討一下，Vue的響應(yīng)式系統(tǒng)僅僅是一個Proxy嗎，本文將圍繞此問題探索一下Proxy是如何實現(xiàn)Vue響應(yīng)式的，感興趣的小伙伴可以了解一下2023-08-08
Vue3-KeepAlive,多個頁面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive，多個頁面使用keepalive方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個路由獨享的，或者組件級的2023-04-04
基于Vue實現(xiàn)后臺系統(tǒng)權(quán)限控制的示例代碼
本篇文章主要介紹了基于Vue實現(xiàn)后臺系統(tǒng)權(quán)限控制的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
在我們?nèi)粘ｍ椖块_發(fā)中,經(jīng)常會有表格跨頁多選的需求,接下來讓我們用?el-table示例一步步來實現(xiàn)這個需求,文中有詳細的代碼講解,對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
詳解Vue 中 extend 、component 、mixins 、extends 的區(qū)別
這篇文章主要介紹了Vue 中 extend 、component 、mixins 、extends 的區(qū)別,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-12-12
最近在學(xué)習(xí)前端制作了一個購物車小球的動畫效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-09-09
本篇文章主要介紹了VUE開發(fā)一個圖片輪播的組件示例代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03
本文介紹了Vue3+Vite+Ts搭建腳手架的實現(xiàn),步驟包括創(chuàng)建項目、選擇技術(shù)棧、安裝依賴及運行項目,旨在為開發(fā)者提供一個簡易快速的搭建流程,感興趣的可以了解一下2024-11-11