vue中同時監(jiān)聽多個參數(shù)的實現(xiàn)

更新時間：2022年04月08日 14:31:45 作者：otatoz

這篇文章主要介紹了vue中同時監(jiān)聽多個參數(shù)的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

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

data中定義一個對象

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

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

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同時監(jiān)聽多個屬性</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ù)時，小括號可寫可不寫

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

帶有參數(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  rel="external nofollow"  @click.prevent = "two">百度一下</a>

keyup監(jiān)聽某個鍵盤鍵帽
.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">
? ? ? <h2>ccc</h2>
? ? ? <h2>ccc</h2>
? ? ? <h2>ccc</h2>
? ? ? <h2>ccc</h2>
? ? </div>

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

2.v-if和v-else使用

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: