欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?watch中監(jiān)聽值的變化,判斷后修改值方式

 更新時間:2022年04月11日 08:37:46   作者:水木Moira  
這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

watch監(jiān)聽值的變化,判斷后修改值

在這里插入圖片描述

計數(shù)器有最小值與最大值的限制,且中間的文本輸入框可自己輸入值。

實現(xiàn)方式是在watch中監(jiān)聽文本輸入框綁定的v-model,跟最大最小值比較后,如果有需要,則改變值。

<mu-text-field v-model.number="weightNum" solo full-width ></mu-text-field>
watch: {
            //監(jiān)聽用戶輸入的重量值
            //如果超過最大重量,彈出提示,并且將輸入框重量置于最大值
            //如果低于最小重量,彈出提示,并且將輸入框重量置于最小值
            weightNum(val){
                if(val<this.weightLimit.minWeight){
                    this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight});
                    this.$data.weightNum = this.weightLimit.minWeight;
                }
                else if(val>this.weightLimit.maxWeight){
                    this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight});
                    this.$data.weightNum = this.weightLimit.maxWeight;
                }
            }        
        },

核心:

this.$data.weightNum = this.weightLimit.minWeight;

這里如果直接

this.weightNum = this.weightLimit.minWeight;

是沒有用的。

Vue_watch()方法,檢測數(shù)據(jù)的改變。

 <script type="text/javascript">
            var vm = new Vue({
                el: app01,
                data:{
                    a:'test',
                }
            })
            // 檢測數(shù)據(jù)'a'的改變,放數(shù)據(jù)改變時執(zhí)行
            vm.$watch('a', function(newval, oldval){
                console.log(newval, oldval);
            })
            vm.$data.a = 'wdc'
        </script>

watch監(jiān)聽data函數(shù)中數(shù)據(jù)改變的三種方式

在Vue中有一個watch方法可用于監(jiān)聽數(shù)據(jù)的改變,避免重復(fù)添加監(jiān)聽函數(shù),watch中有三種監(jiān)聽數(shù)據(jù)的方式:

1.常用型(淺層監(jiān)聽)

 如此即可監(jiān)聽loading值的變化,并進行相應(yīng)操作。

2.深層監(jiān)聽(利用deep屬性)

 這樣利用deep屬性,將deep設(shè)為true,則可進行深層監(jiān)聽,只要modalForm中任意一個屬性的值發(fā)生改變,則都會調(diào)用handler函數(shù),當(dāng)然該函數(shù)名可隨意。

3.深層監(jiān)聽某一個特定屬性(用字符串表示對象屬性的調(diào)用)

此時只會監(jiān)聽modalForm里面的model屬性,當(dāng)他的值發(fā)生改變時才會執(zhí)行回調(diào)函數(shù)。

4、利用computed計算屬性

 此時在添加了計算屬性后,可以像淺層監(jiān)聽一樣的方式監(jiān)聽深層的model屬性值的改變。

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue組件component的注冊與使用詳解

    vue組件component的注冊與使用詳解

    組件是Vue是一個可以重復(fù)使用的Vue實例, 它擁有獨一無二的組件名稱,它可以擴展HTML元素,以組件名稱的方式作為自定義的HTML標(biāo)簽,這篇文章主要介紹了vue組件component的注冊與使用,需要的朋友可以參考下
    2022-08-08
  • vue.js的提示組件

    vue.js的提示組件

    這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • vue3實現(xiàn)無縫滾動組件的示例代碼

    vue3實現(xiàn)無縫滾動組件的示例代碼

    在日常開發(fā)中,經(jīng)常遇到需要支持列表循環(huán)滾動展示,特別是在數(shù)據(jù)化大屏開發(fā)中,所以小編今天為大家介紹一下如何利用vue3實現(xiàn)一個無縫滾動組件吧
    2023-09-09
  • Vue利用插件實現(xiàn)打印功能的示例詳解

    Vue利用插件實現(xiàn)打印功能的示例詳解

    這篇文章主要為大家詳細(xì)介紹了Vue如何利用vue-print-nb插件實現(xiàn)打印功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)一下
    2023-03-03
  • Vue實現(xiàn)單點登錄控件的完整代碼

    Vue實現(xiàn)單點登錄控件的完整代碼

    這里提供一個Vue單點登錄的demo給大家參考,對Vue實現(xiàn)單點登錄控件的完整代碼感興趣的朋友跟隨小編一起看看吧
    2021-11-11
  • vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色

    vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色

    這篇文章主要介紹了vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue遞歸組件實現(xiàn)elementUI多級菜單

    vue遞歸組件實現(xiàn)elementUI多級菜單

    這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實現(xiàn)elementUI多級菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • webpack+vue.js構(gòu)建前端工程化的詳細(xì)教程

    webpack+vue.js構(gòu)建前端工程化的詳細(xì)教程

    這篇文章主要介紹了webpack+vue.js構(gòu)建前端工程化的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-05-05
  • Vue父子之間值傳遞的實例教程

    Vue父子之間值傳遞的實例教程

    這篇文章主要給大家介紹了關(guān)于Vue父子之間值傳遞的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • vue子組件設(shè)計provide和inject理解使用

    vue子組件設(shè)計provide和inject理解使用

    這篇文章主要為大家介紹了vue子組件設(shè)計provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08

最新評論