Vue監聽使用方法和過濾器實現

2022-06-24 14:01:49

前言

今天是自學VUE整理知識點的第四天呢，今天整理一下過濾器，watch監聽的知識點

過濾器

過濾器的作用:為頁面中資料進行添油加醋
有兩種: 區域性過濾器全域性過濾器
格式：
- 1.宣告過濾器
- 2.{{資料|過濾器的名字}}

區域性過濾器程式碼

區域性⾃定義過濾器：關鍵用到的是使⽤filters屬性，第⼀種和第⼆種宣告⽅式都可以去實現。

      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/>`
		})

全域性過濾器

優點：在專案中經常使用過濾器對資料進行格式化後顯示在頁面上，比如日期格式轉化，數值轉換成狀態文字等過濾器，如果在每個.vue頁面都複製同一個過濾器進行使用，雖然是沒問題，但是如果過濾器方法中，需要追加新的情況判斷或出現Bug時就要將每個.vue內的過濾器進行修改，既費時又費力，所以為了專案維護，可以優先考慮定義全域性過濾器

全域性過濾器程式碼:

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

watch監聽

vue提供了偵聽屬性watch，可以很好的觀察和偵聽vue範例響應資料的變化。

基本的資料型別：

基本的資料型別簡單監聽
複雜的資料型別深度監聽

簡單監聽

通過watch方法：方法裡有(新值，舊值)用來監聽也可新增條件，當新值等於一個值時，輸出其他值。*

  <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來了')
  				}
  			}

複雜監聽

對於複雜的監聽事件使用stus進行深度監聽*

	<button @click="stus[0].name='rose'">改變 </button>
			<h4>{{stus[0].name}}</h4>
  new Vue({
				el:'#app',
				data(){
					return{
					msg:'',
					stus:[{name:'jack'}]
					}
				},
	
					 // 監聽複雜資料型別 object array 深度監聽	
					stus:{
						deep:true,//深度監聽
						handler:function(newV,oldV){
							console.log(newV[0].name);
						}
					}
				}

到此這篇關於Vue監聽使用方法和過濾器實現的文章就介紹到這了,更多相關Vue監聽內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！