欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue2.0如何監(jiān)聽屬性的使用

這篇文章給大家分享的是有關(guān)vue2.0如何監(jiān)聽屬性的使用的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站專業(yè)提供西部信息中心服務(wù),為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案,用戶可自行在線購買西部信息中心服務(wù),并享受7*24小時(shí)金牌售后服務(wù)。

1.基礎(chǔ)版監(jiān)聽:

場景如下:輸入框輸入你的年齡,如果年齡在0-15歲提示信息:你還是個(gè)小孩,如果年齡在 15-25歲,提示信息:你已經(jīng)是個(gè)少年,如果年齡在25歲以上,提示信息:你已經(jīng)長大了。根據(jù)需求配合監(jiān)聽屬性我們得到下面的代碼:

<template>
 <div id="app">
  年齡:<input type="number" v-model="age"><br>
  提示信息:<span>{{infoMsg}}</span>
 </div>
</template>

<script>
export default {
 data() {
  return {
   age: "",
   infoMsg:""
  }
 },
 watch:{
  age:function(val,oldval){
   if(val>0 && val<15){
    this.infoMsg="你還是個(gè)小孩"
   }else if(val>15 && val<25){
    this.infoMsg="你已經(jīng)是個(gè)少年"
   }else{
    this.infoMsg="你已經(jīng)長大了"
   }
  }
 }
}
</script>

這里需要特別說明一下的是:堅(jiān)挺屬性方法中的兩個(gè)參數(shù)分別代表的含義:第一個(gè)val是當(dāng)面正在監(jiān)聽的屬性的值,oldval是屬性改變之前的值,由于這是形參的原因,參數(shù)的名字可以自己定義,但是但是參數(shù)所代表的含義是不會(huì)變化的。

2.進(jìn)階版監(jiān)聽:

下面我們改變一下需求:基礎(chǔ)規(guī)則不變,但是因?yàn)楹笈_(tái)數(shù)據(jù)庫的更改(畫個(gè)圈圈咀咒他)我們需要提交一個(gè)這樣的數(shù)據(jù)結(jié)構(gòu)

 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },

由于我們監(jiān)聽的是對(duì)象info中的屬性age值的變化,所以我們需要使用到的是深度監(jiān)聽,具體代碼如下:

<template>
 <div id="app">
  年齡:<input type="number" v-model="info.age"><br>
  提示信息:<span>{{infoMsg}}</span>
 </div>
</template>

<script>
export default {
 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },
 watch: {
  info: {
   handler: function(val, oldval) {
    var that = this;
    if (val.age > 0 && val.age < 15) {
     that.infoMsg = "你還是個(gè)小孩";
    } else if (val.age > 15 && val.age < 25) {
     that.infoMsg = "你已經(jīng)是個(gè)少年";
    } else {
     that.infoMsg = "你已經(jīng)長大了";
    }
   },
   deep: true
  }
 }
};
</script>

在這里需要注意的有兩點(diǎn):1,這里的function不能使用箭頭函數(shù)替代,如果使用箭頭函數(shù)的話,this的指向會(huì)是全局。2,你會(huì)注意到這里多加入一個(gè)屬性是deep,它的含義表示是否開啟深度監(jiān)聽,如果開啟值為true,反之為false。

3.最高級(jí)監(jiān)聽:

針對(duì)第二個(gè)案例不知道你有沒有發(fā)現(xiàn)一個(gè)問題:我們監(jiān)聽的是一個(gè)對(duì)象里面某個(gè)屬性的變化,但是如果當(dāng)這個(gè)對(duì)象里面有很多個(gè)值的時(shí)候,雖然也可以使用第二種方法進(jìn)行監(jiān)聽,但是這將會(huì)是對(duì)資源的一種極大的浪費(fèi),身為一個(gè)嚴(yán)謹(jǐn)?shù)某绦騿T(微笑臉),絕對(duì)不能允許這樣的事情發(fā)生,所以我們可以結(jié)合computed(計(jì)算屬性)對(duì)上面的代碼進(jìn)行優(yōu)化:

<template>
 <div id="app">
  年齡:<input type="number" v-model="info.age"><br>
  提示信息:<span>{{infoMsg}}</span>
 </div>
</template>
<script>
export default {
 data() {
  return {
   info: {
    age: "",
    name: "",
    hobit: ""
   },
   infoMsg: ""
  };
 },
 computed: {
  ageval: function() {
   return this.info.age;
  }
 },
 watch: {
  ageval: {
   handler: function(val, oldval) {
    var that = this;
    if (val > 0 && val < 15) {
     that.infoMsg = "你還是個(gè)小孩";
    } else if (val > 15 && val < 25) {
     that.infoMsg = "你已經(jīng)是個(gè)少年";
    } else {
     that.infoMsg = "你已經(jīng)長大了";
    }
   },
   deep: true
  }
 }
};
</script>

通過上面的我們看出,這次我們監(jiān)聽的是計(jì)算屬性ageval,而計(jì)算屬性返回的則是info對(duì)象中age的值,與第二次的代碼進(jìn)行比較我們可以發(fā)現(xiàn)兩次代碼中監(jiān)聽的一個(gè)是對(duì)象info,一個(gè)是info對(duì)象中age的值,性能大大增強(qiáng),這就是我們期待的結(jié)果了。

感謝各位的閱讀!關(guān)于“vue2.0如何監(jiān)聽屬性的使用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!

當(dāng)前題目:vue2.0如何監(jiān)聽屬性的使用
網(wǎng)站地址:http://www.chinadenli.net/article34/jigcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)ChatGPT做網(wǎng)站標(biāo)簽優(yōu)化商城網(wǎng)站服務(wù)器托管

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)