vue2 v-model/v-text 中使用過濾器的方法示例
更新時(shí)間：2019年05月09日 14:54:29 作者：Liu_xiaoqing
這篇文章主要介紹了vue2 v-model/v-text 中使用過濾器的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
Vue.js 允許自定義過濾器，一般可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示：
<!-- 在雙花括號(hào)中 -->
{{ message | capitalize }}
<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>
可以在一個(gè)組件的選項(xiàng)中定義私有的過濾器：
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 實(shí)例之前全局定義過濾器：
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中非父子組件通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件
本篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件，可以實(shí)現(xiàn)回到頂部效果，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
vue實(shí)現(xiàn)點(diǎn)擊選中,其他的不選中方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)點(diǎn)擊選中,其他的不選中方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue通過Object.defineProperty來實(shí)現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法） 實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理2023-01-01
Vue-Router實(shí)現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實(shí)現(xiàn)頁面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來一起看看吧。2017-02-02
vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程
這篇文章主要為大家詳細(xì)介紹了vue集成openlayers加載geojson并實(shí)現(xiàn)點(diǎn)擊彈窗教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
本篇文章主要介紹了詳解前后端分離之VueJS前端，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路
這篇文章主要介紹了Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑（jquery和params），所以決定總結(jié)一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08