Vue監(jiān)聽使用方法和過濾器實現(xiàn)

更新時間：2022年06月24日 11:05:27 作者：? 默默的成長? ?

這篇文章主要介紹了Vue監(jiān)聽使用方法和過濾器實現(xiàn)，過濾器為頁面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過濾器和全局過濾器

前言

今天是自學(xué)VUE整理知識點的第四天呢，今天整理一下過濾器，watch監(jiān)聽的知識點

過濾器

過濾器的作用:為頁面中數(shù)據(jù)進(jìn)行添油加醋
有兩種: 局部過濾器全局過濾器
格式：
- 1.聲明過濾器
- 2.{{數(shù)據(jù)|過濾器的名字}}

局部過濾器代碼

局部?定義過濾器：關(guān)鍵用到的是使?filters屬性，第?種和第?種聲明?式都可以去實現(xiàn)。

      Vue.component('myLi',{
			template:`
			`
		});
               var App={
			data(){
				return{
					price:0,
					msg:'hello filter'
				}
			},
			template:`
			<div>
			 <input type='number' v-model='price'  />
			 <h3>{{price | myCurrentcy}}</h3>
			 <h4>{{msg |myReverse 	 }}</h4>
			</div>
			`,
			filters:{
				//  聲明過濾器
				myCurrentcy:function(value){
					return "￥"+value
				}
			}
		};
		
		new Vue({
			el:'#app',
			components:{
				App,
			},
			template:`<App/>`
		})

全局過濾器

優(yōu)點：在項目中經(jīng)常使用過濾器對數(shù)據(jù)進(jìn)行格式化后顯示在頁面上，比如日期格式轉(zhuǎn)化，數(shù)值轉(zhuǎn)換成狀態(tài)文字等過濾器，如果在每個.vue頁面都復(fù)制同一個過濾器進(jìn)行使用，雖然是沒問題，但是如果過濾器方法中，需要追加新的情況判斷或出現(xiàn)Bug時就要將每個.vue內(nèi)的過濾器進(jìn)行修改，既費時又費力，所以為了項目維護(hù)，可以優(yōu)先考慮定義全局過濾器

全局過濾器代碼:

    Vue.filter('myReverse',function(value){
			return value.split('').reverse().join('');
			
		});`

watch監(jiān)聽

vue提供了偵聽屬性watch，可以很好的觀察和偵聽vue實例響應(yīng)數(shù)據(jù)的變化。

基本的數(shù)據(jù)類型：

基本的數(shù)據(jù)類型簡單監(jiān)聽
復(fù)雜的數(shù)據(jù)類型深度監(jiān)聽

簡單監(jiān)聽

通過watch方法：方法里有(新值，舊值)用來監(jiān)聽也可添加條件，當(dāng)新值等于一個值時，輸出其他值。*

  <input type="text"  v-model="msg">
  	<h3>{{msg}}</h3>
  new Vue({
  		el:'#app',
  		data(){
  			return{
  			msg:'',
  			stus:[{name:'jack'}]
  			}
  		},
  		watch:{
  			msg:function(newV,oldV){
  				console.log(newV,oldV);
  				if(newV ==='sir'){
  					console.log('sir來了')
  				}
  			}

復(fù)雜監(jiān)聽

對于復(fù)雜的監(jiān)聽事件使用stus進(jìn)行深度監(jiān)聽*

	<button @click="stus[0].name='rose'">改變 </button>
			<h4>{{stus[0].name}}</h4>
  new Vue({
				el:'#app',
				data(){
					return{
					msg:'',
					stus:[{name:'jack'}]
					}
				},
	
					 // 監(jiān)聽復(fù)雜數(shù)據(jù)類型 object array 深度監(jiān)聽	
					stus:{
						deep:true,//深度監(jiān)聽
						handler:function(newV,oldV){
							console.log(newV[0].name);
						}
					}
				}

到此這篇關(guān)于Vue監(jiān)聽使用方法和過濾器實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: