纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue侦听器用法 Vue中侦听器的基本用法示例

_啊呜   2021-08-06 我要评论
想了解Vue中侦听器的基本用法示例的相关内容吗,_啊呜在本文为您仔细讲解Vue侦听器用法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue侦听器,vue监听器,vue侦听器语法,下面大家一起来学习吧。

前言

Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

一、侦听器的基本用法

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: { 
    firstName: 'Foo', 
    lastName: 'Bar', 
    fullName: 'Foo Bar' }, 
watch: { 
    firstName: function (val) { 
        this.fullName = val + ' ' + this.lastName }, 
    lastName: function (val) { 
        this.fullName = this.firstName + ' ' + val } } })

这段代码的作用就是监听firstName和fullName,当它们发生变化的时候,就改变fullname的值。

二、侦听器的格式

方法格式的侦听器

  • 缺点1:无法在刚进入页面的时候,自动触发!
  • 缺点2:如果侦听的是一个对象,如果属性中的属性发生了变化,不会触发侦听器!

对象格式的侦听器

  • 好处1:可以实现刚进入页面,自动触发!
  • 好处2:可以实现深度监听,也就是监听对象中的属性是否变化!

三、实现刚进入页面就触发监听和深度监听

刚进入页面就触发监听

通过添加immediate选项来实现

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
            // 实现刚进入页面就触发监听
            immediate: true
        }
    }
})

深度监听

在上述代码中,当username发生变化时我们是不能监听成功的,因为变化的是对象属性的值,因此需要深度监听,添加deep选项即可

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        info:{
            handle(newVal){
                console.log(newVal)
            },
            // 实现刚进入页面就触发监听
            immediate: true,
            // 实现深度监听,只要对象中的任何一个属性变化了,都会触发“对象的侦听”
            deep: true
        }
    }
})

深度监听返回侦听对象子属性的值

上述代码中执行结果是打印info这个对象,我们希望打印的username的值,需要加上newVal.username还是比较麻烦的,我们其实可以直接监听并打印变化子属性的值,只需要在要监听的子属性外面加上一层单引号即可:

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        } 
    },
    watch:{
        'info.username': {
            handle(newVal){
                console.log(newVal)
            }
        }
    }
})

最后

⚽本文介绍了Vue中的侦听器的基本使用以及如何实现深度监听,希望大家阅读完有一定的收获呦~


相关文章

猜您喜欢

  • SpringBoot使用Swagger Spring Boot中怎样使用Swagger详解

    想了解Spring Boot中怎样使用Swagger详解的相关内容吗,团子大圆帅在本文为您仔细讲解SpringBoot使用Swagger的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:springboot使用swagger,swagger使用教程,springboot教程,下面大家一起来学习吧。..
  • java搞定汉诺塔 手把手带你用java搞定汉诺塔

    想了解手把手带你用java搞定汉诺塔的相关内容吗,rampant boy在本文为您仔细讲解java搞定汉诺塔的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:java汉诺塔,搞定java,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.freefLashonLinegames.com 【木头下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式