溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue中怎么同時監聽多個參數”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue中怎么同時監聽多個參數”吧！
vue使用watch同時監聽多個參數，其中有任意一個參數發生改變時，都會被監聽到需要使用到計算屬性computed與監聽watch
data(){
return{
obj:{
name:'xpf',
gender:'male',
age:24
}
}
}computed中：將需要監聽的參數放入一個新變量中
computed:{
'newParams':function(){
const {name,age} = this.obj
return {name,age}
}
},watch中：監聽新的變量
watch:{
newParams:function(){
alert(1)
}
},<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>watch同時監聽多個屬性</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <div @click="changeObj">點我</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>
語法糖@
1. 基本的使用法法
<div id="add">
點擊次數{{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. 事件監聽帶參數的使用方法
不帶參數，寫函數時，小括號可寫可不寫
<button @click = "one">按鈕1</button> <button @click = "one()">按鈕2</button>
帶有參數時，寫函數時，小括號要寫，傳進的參數也要寫
<button @click = "two">按鈕2</button> <!-- 默認輸出 瀏覽器生產的event事件對象 --> <button @click = "two()">按鈕3</button> <!-- 輸出 undefind --> <button @click = "two(123)">按鈕4</button> <!-- 輸出 123 -->
即帶參數有帶event
<button @click = "three(123,$event) ">按鈕5</button>
在小括號里添加$event可即添加參數又添加event事假
3.事件對象的修飾符
.stop 相當于事件對象的stopPropagaton，阻止冒泡事件
<div @click = "one">父親 <button @click.stop = "two">兒子</button> </div>
.prevent 阻止默認事件 preventDefault
<a href="https://www.baidu.com/" rel="external nofollow" @click.prevent = "two">百度一下</a>
keyup 監聽某個鍵盤鍵帽
.enter 只監聽回車鍵
<input type="text" @keyup= "two"> <input type="text" @keyup.enter = "two">
.once只監聽一次
<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隱藏，可設置一個變量isShow來控制
2.v-if和v-else使用
<div id="add"> <h3 v-if = "isShow">我是你爸爸</h3> <h3 v-else>不，我才是你爸爸</h3> </div>
兩者只能顯示一個當變量isShow為true時，else隱藏，同理相反
3.v-if和v-else-if和v-lese使用
<h3 v-if = "message >=90"> 優秀 </h3> <h3 v-else-if = "message >=80"> 良好 </h3> <h3 v-else-if = "message >=70"> 及格 </h3> <h3 v-else> 不及格 </h3>
3個結合可讀性差，不建議
可在computed里封裝一個函數
computed: {
result(){
let num = " "
if (this.message >=90) {
num = '優秀'
}else if(this.message >= 80){
num = '良好'
}else{
num = "不及格"
}
return num
}
}在調用，可讀性較好
感謝各位的閱讀，以上就是“vue中怎么同時監聽多個參數”的內容了，經過本文的學習后，相信大家對vue中怎么同時監聽多個參數這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
