vue中同时监听多个参数的实现

2024-04-02 19:04:59 813人浏览安东尼

摘要

目录如何同时监听多个参数data中定义一个对象完整代码Vue事件监听,条件判断事件监听 v-on条件判断如何同时监听多个参数 vue使用watch同时监听多个参数，其中有任意一个参数

如何同时监听多个参数

vue使用watch同时监听多个参数，其中有任意一个参数发生改变时，都会被监听到需要使用到计算属性computed与监听watch

data中定义一个对象

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>

vue事件监听,条件判断

事件监听 v-on

语法糖@

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">
      <h2>ccc</h2>
      <h2>ccc</h2>
      <h2>ccc</h2>
      <h2>ccc</h2>
    </div>

为true显示，为false隐藏，可设置一个变量isShow来控制

2.v-if和v-else使用

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

两者只能显示一个当变量isShow为true时，else隐藏，同理相反

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

<h2 v-if = "message >=90"> 优秀 </h2>
 <h2 v-else-if = "message >=80"> 良好 </h2>
 <h2 v-else-if = "message >=70"> 及格 </h2>
 <h2 v-else> 不及格 </h2>

3个结合可读性差，不建议

可在computed里封装一个函数

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

在调用，可读性较好

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

--结束END--

本文标题: vue中同时监听多个参数的实现

本文链接: https://lsjlt.com/news/145379.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341