v-model中如何使用過(guò)濾器

更新時(shí)間：2023年10月08日 14:29:54 作者：習(xí)慣是一種病

這篇文章主要介紹了v-model中如何使用過(guò)濾器問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

v-model中使用過(guò)濾器

v-model不能使用過(guò)濾器（filter）的替代或者解決方法；

如圖：

頁(yè)面中有v-model需要在輸入時(shí)驗(yàn)證格式的時(shí)候(<input v-model='price' />)

官方給出的方法是使用computed，但是多個(gè)框時(shí)computed不能很好的復(fù)用；

使用input事件，通過(guò)傳值驗(yàn)證輸入框中的內(nèi)容，

直接上代碼：

<input v-model="price" @input="priceFormat('price',price)"/>
data(){
    return {
       price:'',//價(jià)錢
    }
},
methods: {
    /*價(jià)格過(guò)濾
     *data：對(duì)應(yīng)data中的名稱，是字符串,val：對(duì)應(yīng)data中的值
    */
    priceFormat(data,val){
         if(!/^\d*?\.?\d*?$/.test(val)){
             this[data]='';//修改data中的價(jià)錢為空
          }
     }
}

v-model或者v-text中使用過(guò)濾器進(jìn)行脫敏不生效問(wèn)題

vue.js允許我們自定義過(guò)濾器，可以用來(lái)處理一些常用的文本格式化，但是過(guò)濾器只能用在兩個(gè)地方，雙括弧插值（{{}}）和v-bind 表達(dá)式（后者聰vue2.1.0+才開(kāi)始支持），并且filter應(yīng)該被定義在js表達(dá)式的尾部，通常放在vue框架的methods下面；

但是有時(shí)候我們需要在v-model/v-text中使用脫敏，這里分別提供兩種方法：

1.使用v-model進(jìn)行過(guò)濾器脫敏

<template>
 <div id="app">
  <input type="text" v-model="userDate" />  
  <span>{{ userDate | dateFormat }}</span>
 </div>
</template>

其中，v-model用來(lái)進(jìn)行雙向綁定，下面的雙括弧用來(lái)進(jìn)行脫敏顯示；

2.手動(dòng)將關(guān)鍵部位進(jìn)行截取加*脫敏

<div class="cuzu" v-show="cuzu">
				<div class="formName formSlect">
					<h1>出租人姓名</h1>
					<input type="text" id="lessorName" v-model="Tname" disabled="disabled">
					<div class="clearFix"></div>
				</div>
				<div class="formName formSlect">
					<h1>出租人證件號(hào)</h1>
					<input type="text" id="lessorCode"  v-model="Tidcard" disabled="disabled">
					<div class="clearFix"></div>
				</div>
			</div>

//這里用來(lái)傳遞實(shí)參運(yùn)算
        _this.name = res.userdetail.name;
        _this.idcard = res.userdetail.papersnumber;
        //身份證脫敏處理
        info.Tidcard = res.userdetail.papersnumber.substring(0, 1) + "****************" + res.userdetail.papersnumber.substring(17, 18);
        //姓名脫敏處理
        info.Tname = "*" + res.userdetail.name.slice(1);

這里v-model拿到后臺(tái)截取加*后的參數(shù)進(jìn)行脫敏展示。

獲取到用戶信息后對(duì)名字（2/3/4個(gè)字）進(jìn)行脫敏

_this.name = res.userdetail.name;
		if (_this.name.length == 2) {
			_this.yhmc = _this.name.slice(0, 1) + "*";
		} else if (_this.name.length == 3) {
			_this.yhmc = _this.name.slice(0, 1) + "**";
		}
		else {
			_this.yhmc = _this.name.slice(0, 1) + "***";
		}

3.定義一個(gè)方法進(jìn)行脫敏處理

changeCardid: function (value) {
			if (!value) return ''
			//return value.replace(/(\w{3})\w*(\w{4})/, '$1******$2')
			return value.replace(/(\w{1})\w*(\w{1})/, '$1****************$2')
		},
		changeName: function (value) {
			if (!value) return ''
			else {
				if (value.length == 3) {
					return value.substr(0, 1) + "**"
				} else if (value.length == 2) {
					return value.substr(0, 1) + "*"
				} else {
					return value.substr(0, 1) + "***"
				}
			}
		}

然后在v-model中直接調(diào)用我們聲明的脫敏方法，changeName(name)