vue监听多个变量的方法

vue当中有时需要监听多个变量,方法如下,推荐方法一

一、把多个变量放在一个对象里

data() {
    return {
      switchParam: {
        a: false,
        b: false,
        c: false
      }
    }
}

watch: {
    switchParam: {
      deep: true,
      handler(newVal) {
        let dom = document.querySelector(‘.vis-panels-controler‘);
        if (newVal.a || newVal.b || newVal.c) {
          dom.style.zIndex = 180;
        } else {
          dom.style.zIndex = 120;
        }
      }
    },
}

二、小技巧方法

data() {
    return {
      a: false, // 自主分析
      b: false,
      c: false
    }
  },
  computed: {
   allPanelShow() {
    this.a;
    this.b;
    this.c;  return Date.now()
    }
  },
  watch: {
   allPanelShow() {
     let dom = document.querySelector(‘.vis-panels-controler‘);
    if (this.a || this.b || this.c) {
      dom.style.zIndex = 180;
    } else {
       dom.style.zIndex = 120;
    }
  },
}
时间: 2024-08-30 04:35:39

vue监听多个变量的方法的相关文章

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

Android 通过系统使用NotificationListenerService 监听各种Notification的使用方法

NotificationListenerService是通过系统调起的服务,当有应用发起通知的时候,系统会将通知的动作和信息回调给NotificationListenerService. 在继承NotificationListenerService服务实现自己逻辑之前,需要在配置文件中添加如下代码,获取权限. <service android:name=".NotificationListener" android:label="@string/service_name

安卓开发学习日记 DAY5——监听事件onClick的实现方法

今天主要学习了监听事件的是实现方法,就是说,做了某些动作后,怎么监听这个动作并作出相应反应. 方法主要有三种: 1.匿名内部类的方法 2.独立类的方法 3.类似实现接口的方法 以下分别分析: 1.匿名内部类的方法 就是使用innerClass的方式创建监听事件 步骤如下: 1)创建一个button,在xml中拖入一个button即可 2)在源程序中对button进行初始化 就是,先创建一个button btn,然后使用findViewById找到你之前的那个button进行关联,此时请注意fin

PostgreSQL数据库服务端监听设置及客户端连接方法教程

众所周知,PostgreSQL 是一个自由的对象-关系数据库服务器(数据库管理系统),是一个可以免费使用的开放源代码数据库系统.本文详细介绍了PostgreSQL数据库服务端监听设置及客户端连接方法,具体如下: 一.背景介绍: 本文所述PostgreSQL服务端运行在RedHat Linux上,IP为:192.168.230.128客户端安装在Windows XP上, IP为:192.168.230.1 二.配置方法: 1.修改服务端/etc/postgresql/9.5/main/postgr

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="

vue监听滚轮事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js">&

vue监听滚动事件 实现动态锚点

前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用 <a href="#i

vue 监听路由变化

方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,当路由发生变化的时候执行 watch: { '$route':'getPath

vue监听滚动事件 实现某元素吸顶或者固定位置显示

https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () { var