溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中怎么同時(shí)監(jiān)聽多個(gè)參數(shù)

發(fā)布時(shí)間：2022-04-08 16:44:04 來源：億速云 閱讀：952 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“vue中怎么同時(shí)監(jiān)聽多個(gè)參數(shù)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue中怎么同時(shí)監(jiān)聽多個(gè)參數(shù)”吧！

如何同時(shí)監(jiān)聽多個(gè)參數(shù)

vue使用watch同時(shí)監(jiān)聽多個(gè)參數(shù)，其中有任意一個(gè)參數(shù)發(fā)生改變時(shí)，都會被監(jiān)聽到需要使用到計(jì)算屬性computed與監(jiān)聽watch

data中定義一個(gè)對象

data(){
    return{
        obj:{
            name:'xpf',
            gender:'male',
            age:24
    }
    }
}

  • computed中：將需要監(jiān)聽的參數(shù)放入一個(gè)新變量中

computed:{
    'newParams':function(){
        const {name,age} = this.obj
        return {name,age}
    }    
},

  • watch中：監(jiān)聽新的變量

watch:{
    newParams:function(){
        alert(1)
    }
},

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch同時(shí)監(jiān)聽多個(gè)屬性</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
        <div @click="changeObj">點(diǎn)我</div>
    </div>    
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    obj:{
                        name:'xpf',
                        gender:'male',
                        age:24
                    }
                }
            },
            computed:{
                'newParams':function(){
                    const {name,age} = this.obj
                    return {name,age}
                }    
            },
            watch:{
                newParams:function(){
                    alert(1)
                }
            },
            methods:{
                changeObj(){
                    // this.obj.name = 'xx'
                    this.obj.age = 21
                }
            }
        })
    </script>
</body>
</html>

vue事件監(jiān)聽,條件判斷

事件監(jiān)聽 v-on

語法糖@

1. 基本的使用法法

    <div id="add">
        點(diǎn)擊次數(shù){{counter}}
         <button @click = "add">+</button> <!--v-on:click = "" 語法糖  -->
        <button @click = "dec">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const add = new Vue({
            el:'#add',
            data:{
                counter:0
            },
            methods:{
                add:function(){
                    console.log('添加了');
                    this.counter++
                },
                dec:function(){
                    console.log('減少了');
                    this.counter--
                }
            }
        })  
    </script>

2. 事件監(jiān)聽帶參數(shù)的使用方法

不帶參數(shù)，寫函數(shù)時(shí)，小括號可寫可不寫

<button @click = "one">按鈕1</button>
<button @click = "one()">按鈕2</button>

帶有參數(shù)時(shí)，寫函數(shù)時(shí)，小括號要寫，傳進(jìn)的參數(shù)也要寫

<button @click = "two">按鈕2</button> <!-- 默認(rèn)輸出 瀏覽器生產(chǎn)的event事件對象 -->
<button @click = "two()">按鈕3</button> <!-- 輸出 undefind -->
<button @click = "two(123)">按鈕4</button>  <!-- 輸出 123  -->

即帶參數(shù)有帶event

<button @click = "three(123,$event) ">按鈕5</button>

在小括號里添加$event可即添加參數(shù)又添加event事假

3.事件對象的修飾符

.stop  相當(dāng)于事件對象的stopPropagaton，阻止冒泡事件

 <div @click = "one">父親
      <button @click.stop = "two">兒子</button>
    </div>

.prevent 阻止默認(rèn)事件 preventDefault

<a href="https://www.baidu.com/" rel="external nofollow"  @click.prevent = "two">百度一下</a>

keyup 監(jiān)聽某個(gè)鍵盤鍵帽

.enter 只監(jiān)聽回車鍵

<input type="text" @keyup= "two">
<input type="text" @keyup.enter = "two">

.once只監(jiān)聽一次

<button @click.once = "two">按鈕</button>

條件判斷

1.v-if的基本使用

 <div id="add">
    <div v-if = "true">{{message}}</div>
    <div v-if = "false">{{name}}</div>
 
    <div v-if = "isShow">
      <h3>ccc</h3>
      <h3>ccc</h3>
      <h3>ccc</h3>
      <h3>ccc</h3>
    </div>

為true顯示，為false隱藏，可設(shè)置一個(gè)變量isShow來控制

2.v-if和v-else使用

 <div id="add">
    <h3 v-if = "isShow">我是你爸爸</h3>
    <h3 v-else>不，我才是你爸爸</h3>
  </div>

兩者只能顯示一個(gè)當(dāng)變量isShow為true時(shí)，else隱藏，同理相反

3.v-if和v-else-if和v-lese使用

<h3 v-if = "message >=90"> 優(yōu)秀 </h3>
 <h3 v-else-if = "message >=80"> 良好 </h3>
 <h3 v-else-if = "message >=70"> 及格 </h3>
 <h3 v-else> 不及格 </h3>

3個(gè)結(jié)合可讀性差，不建議

可在computed里封裝一個(gè)函數(shù)

 computed: {
        result(){
          let num = " "
          if (this.message >=90) {
            num = '優(yōu)秀'
          }else if(this.message >= 80){
            num = '良好'
          }else{
            num = "不及格"
          }
          return num
        }
      }

在調(diào)用，可讀性較好 

感謝各位的閱讀，以上就是“vue中怎么同時(shí)監(jiān)聽多個(gè)參數(shù)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue中怎么同時(shí)監(jiān)聽多個(gè)參數(shù)這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手