第六十六篇：Vue的watch侦听器
好家伙，哇吃侦听器
1.watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
1.1.侦听器的基本用法
<body>
<div id="app">
<input type="text" v-model="username">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'ni hao shuai'
},
//所有的
watch:{
//侦听器本质上是一个函数，要监听哪个数据，就把那个数据作为方法名即可
username(newVal,oldVal){
console.log("username的数值发生变化",newVal,oldVal)
}
},
methods:{
}
})
</script>
</body>
数据的改变可以被侦听到
2.侦听器的格式
( 1 )方法格式的侦听器
代码参上
缺点1:无法在进入页面时自动触发
缺点2:如果监听的是一个对象,若果对象中的属性发生了变化,不会触发侦听器!
( 2 )对象格式的侦听器
好处1:可以通过immediate属性让监听器自动触发
好处2:可以通过deep选项,让侦听器深度监听对象中的每个属性
代码如下:
<body>
<div id="app">
<input type="text" v-model="username">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'ni hao shuai'
},
//所有的
watch:{
//定义对象格式的侦听器
username:{
//用handler属性定义该侦听器的功能
handler:function(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate:ture
//immediate属性为布尔值
//immediate选项的默认值是flase,ture表示立即执行
}
},
methods:{
}
})
</script>
</body>
3.深度监听deep
通过deep选项,让侦听器深度监听对象中的每个属性
<body>
<div id="app">
<input type="text" v-model="info.username">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
info:{
username:'admin'
}
},
watch:{
info:{
handler(newVal){
console.log(newVal)
},
//开启深度监听,只要对象中任何一个属性变化了,都会触发"对象的侦听器"
deep:true
}
},
methods:{
}
})
</script>
</body>
页面如下:
4.补充:
为了方便,可以直接侦听对象中的子属性
如果要监听的对象是子属性的变化,则必须包裹一层单引号
'info.username'(newVal){
console.log(newVal)
}
That's all
第六十六篇：Vue的watch侦听器的更多相关文章
- Vue框架之侦听器与生命周期
一.计算属性computed和侦听器(watch) 侦听的是单个属性 watch:{ 数据属性的名字:function(value){ }, 数据属性的名字2:function(value){ } } ...
- 《手把手教你》系列技巧篇（六十六）-java+ selenium自动化测试 - 读写excel文件 - 上篇（详细教程）
1.简介 在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...
- 第三百六十六节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询
第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询 bool查询说明 filter:[],字段的过滤,不参与打分must:[] ...
- “全栈2019”Java第六十六章：抽象类与接口详细对比
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- vue 自学笔记(三) 计算属性与侦听器
一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
随机推荐
- 粗谈对ajax的理解
ajax:Asynchronous JavaScript and XML异步JavaScript和XML技术Asynchronous:JavaScript:XMLHttpRequestXML:实现数据 ...
- 合宙Air32F103CBT6开发板上手报告
2022年6月初合宙新上市了 Air32F103 系列 MCU, 市面上 STM32F103 的克隆军队又增加了新的一员. 这次不知道是哪家的贴牌, 分 Air32F103CBT6 和 Air32F1 ...
- sql-DML-增删改
DML:增删改表中数据 1. 添加数据: insert into 表名(列名1,列名2,...列名n) values(值1,值2,...值n); insert into 表名 values(值1,值2 ...
- idea启动java Maven项目,出现" java: 程序包xxxx不存在"
解决办法如下:将idea的构建和运行托管到maven下面
- Codeforces Round #801 (Div. 2)
题集链接 A Subrectangle Guess 代码 #include <bits/stdc++.h> #define endl "\n" using namesp ...
- 绝对路径-相对路径和File类的构造方法
绝对路径和相对路径 绝对路径:是一个完整的路径,以盘符开始(c: d:)c:\a.txt 相对路径:相对指的是相对于当前项目的根目录(可以省略项目的根目录) 注意: 1.路径不区分大小写 2.路径中的 ...
- SpringCloudGateway微服务网关实战与源码分析 - 中
实战 路由过滤器工厂 路由过滤器允许以某种方式修改传入的HTTP请求或传出的HTTP响应.路由过滤器的作用域是特定的路由.SpringCloud Gateway包括许多内置的GatewayFilter ...
- react配置postcss-pxtorem适配
适配移动端操作如下: 安装 postcss-pxtorem .amfe-flexible npm i postcss-pxtorem npm i amfe-flexible amfe-flexible ...
- antd vue 折叠面板 v-for 循环点击无效
问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" ...
- Python下载网易云收藏
提前声明 仅作为个人学习使用,任何版权问题作者概不负责 本文的语言不会且不可能很严谨 博客园的编辑器有点BUG把我搞晕头了,所以本文可能有点鬼畜 前情 不知道各位有几个是对国内大厂的软件设计很满意的? ...