vue快速入门(二十三)侦听器的简单写法与完整写法

注释很详细,直接上代码

上一篇

新增内容

  1. 侦听器简单写法侦听对象或属性
  2. 侦听器完整写法侦听对象(可选深度侦听)

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 挂载点 --><div id="root"><div>第一个被侦听的数据对象:<input type="text" v-model="value1"></div><div>第二个被侦听的数据对象(以下为监听对象的三个属性):</div><div>姓名:<input type="text" v-model="value2.name"></div><div>年龄:<input type="text" v-model="value2.age"></div><div>性别:<input type="text" v-model="value2.sex"></div>
</div><!-- 导入vue的js代码:不会下载的看专栏第一篇 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据value1:'',value2:{name:'',age:'',sex:''}},methods: {// 方法},computed:{// 计算属性},watch:{// 侦听器// 简单写法,侦听某个数据//如果是侦听对象的某个属性,可以写成'value2.name'(单引号是必须的)value1(newValue,oldValue){console.log(newValue)},// 完整写法,可以侦听对象value2:{handler(newValue,oldValue){console.log(newValue)//打印的是对象},deep:true,// 是否深度侦听,启用以后当对象的属性改变时,也会触发侦听器immediate:true// 是否立即执行侦听器,启用以后,页面刷新会立即执行侦听器}}})</script>
</body></html>

效果演示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/815481.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

五子棋:不会下五子棋也没关系,会用Java写五子棋就行

关注公号“微澜网络”获取完整源代码&#xff01; 效果展示&#xff1a; 目录 效果展示&#xff1a; 导语&#xff1a; 游戏介绍&#xff1a; 程序设计&#xff1a; 1.游戏规则和功能&#xff1a; 2.用户界面设计&#xff1a; 3.程序架构设计&#xff1a; 4.可扩展性和灵…

64B/66B编码

一、前言 8B/10B编码主要作用的优化直流平衡&#xff0c;从8bit中插2个bit进去&#xff0c;这样的话最终效果能够使长0或者长1的位数不超过5位&#xff0c;达到很好的效果。但是由于8B/10B编码的带宽利用率非常低&#xff0c;10G的带宽只有8G在传输有效数据&#xff0c;2G的带…

【高录用-快速见刊】2024年数字化经济与金融创新国际学术会议(ICDEFI 2024)

会议简介 2024年数字经济与金融创新国际学术会议即将召开。此次会议旨在汇集全球数字经济与金融创新领域的专家学者&#xff0c;共同探讨数字经济的发展趋势以及金融创新的路径。与会者将分享前沿研究成果&#xff0c;讨论数字技术在金融领域的应用与创新&#xff0c;并推动数…

一篇文章了解php7和php8新特性

PHP7新特性 ?? 运算符 php7以前用三目判断变量是否存在或是否为空 $a isset($_GET[a]) ? $_GET[a] : 1;php7新增null 合并运算符??快捷判断 $a $_GET[a] ?? 1;函数返回值类型声明 用:返回值类型的形式定义函数的返回值类型 <?phpdeclare(strict_types1); fun…

Unity DOTS1.0(4) Baking 和 Baker

Baking 概念&#xff1a; 把Editor中的GameObject数据转换成entities数据写入到Entity Scens里面,这个过程我们叫做BakingBaking是一种不可逆的操作&#xff0c;把低效代价昂贵的但是灵活的GameObjects转换成性能高效的Entities与Components。 作用&#xff1a; 在传统的模…

MyBatis批量插入的五种方式

MyBatis批量插入的五种方式: 一、准备工作 1、导入pom.xml依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MySQL驱动依赖 --…

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅱ)搜索及数据获取配置项

github求⭐ vue3 依赖-组件tablepage-vue3说明文档&#xff0c;列表页快速开发&#xff0c;使用思路及范例&#xff08;Ⅰ&#xff09;配置项文档 vue3 依赖-组件tablepage-vue3说明文档&#xff0c;列表页快速开发&#xff0c;使用思路及范例&#xff08;Ⅱ&#xff09;搜索…

什么是享元模式,有哪些具体应用

一、定义 享元模式是一种通过尽可能多地共享数据来最小化内存使用和对象数量&#xff0c;从而提高性能的设计模式。在享元模式中&#xff0c;如果需要相同数据的多个对象&#xff0c;则共享这些对象而不是创建新的对象&#xff0c;从而提高系统的效率。 其实有很多应用场景&am…

数据库(1)

目录 1.什么是事务&#xff1f;事务的基本特性ACID&#xff1f; 2.数据库中并发一致性问题&#xff1f; 3.数据的隔离等级&#xff1f; 4.ACID靠什么保证的呢&#xff1f; 5.SQL优化的实践经验&#xff1f; 1.什么是事务&#xff1f;事务的基本特性ACID&#xff1f; 事务指…

Alibaba --- 如何写好 Prompt ?

如何写好 Prompt 提示工程&#xff08;Prompt Engineering&#xff09;是一项通过优化提示词&#xff08;Prompt&#xff09;和生成策略&#xff0c;从而获得更好的模型返回结果的工程技术。总体而言&#xff0c;其实现逻辑如下&#xff1a; &#xff08;注&#xff1a;示例图…

napi系列学习进阶篇——NAPI异步调用

简介 OpenHarmony Napi 标准系统异步接口实现支持Callback方式和Promise方式。标准系统异步接口实现规范要求&#xff0c;若引擎开启Promise特性支持&#xff0c;则异步方法必须同时支持Callback方式和Promise方式。使用哪种方式由应用开发者决定&#xff0c;通过是否传递Call…

SpringMVC--获取请求参数 / 域对象共享数据

目录 1. SpringMVC 获取请求参数 1.1. 通过ServletAPI获取 1.2. 控制器方法形参获取 1.3. RequestParam 1.4. RequestHeader 1.5. CookieValue 1.6. 通过POJO获取请求参数 1.7. 解决获取请求参数的乱码问题 2. 域对象共享数据 2.1. 三大域对象 2.2. 准备工作 2.3. S…

RedisTemplate对象中方法的使用

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 Redis是一个key-va…

第二届数据安全大赛暨首届“数信杯”数据安全大赛数据安全积分争夺赛-东区预赛wp

附件下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1tClZrup28n4fUe5Kpa7mgQ?pwdkbd6 文章目录 数据安全题re_ds001Homooo0 数据分析题数据分析1-1数据分析1-2数据分析1-3数据分析2-1数据分析2-2数据分析2-3数据分析3-1数据分析3-2数据分析3-3数据分析5-1数据…

【AI基本模型】简化生成对抗网络 (GAN)

目录 一、说明 二、GAN的工作 三、如何手动计算生成对抗网络&#xff08;GAN&#xff09;&#xff1f;✍️ 四、GAN的应用 一、说明 生成对抗网络 &#xff08;GAN&#xff09; 是一种机器学习算法&#xff0c;可以生成与现实世界数据几乎无法区分的合成数据。它们的工作原理是…

【计算机毕业设计】基于Java+SSM的实战开发项目150套(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f9e1;今天给大家分享150的Java毕业设计&#xff0c;基于ssm框架&#xff0c;这些项目都经过精心挑选&#xff0c;涵盖了不同的实战主题和用例&#xff0c;可做毕业设计和课程…

python画神经网络图

代码1(画神经网络连接图&#xff09; from math import cos, sin, atan import matplotlib.pyplot as plt # 注意这里并没有用到这个networkx这个库&#xff0c;完全是根据matploblib这个库来画的。 class Neuron():def __init__(self, x, y,radius,nameNone):self.x xself.y …

文本检索粗读

一.前情提要 1.本文理论为主&#xff0c;并且仅为个人理解&#xff0c;能力一般&#xff0c;不喜勿喷 2.本文理论知识较为散碎 3.如有需要&#xff0c;以下是原文&#xff0c;更为完备 Neural Corpus Indexer 文档检索【论文精读47】_哔哩哔哩_bilibili 二.正文 &#xf…

CommunityToolkit.Mvvm笔记1---Instruction

CommunityToolkit.Mvvm是一个官方社区套件(Windows Community Toolkit)&#xff0c;延续了MVVMLight的风格&#xff0c;是一个现代、快速和模块化的 MVVM 库。 它是 .NET 社区工具包的一部分。 第一&#xff1a;入门安装 1&#xff0c;用NuGget安装&#xff0c;搜索Community…

【菜狗学前端】ES6+笔记(包含Promise及async、await等)

老样子。复制上来的图片都没了&#xff0c;想看原版可以移步对应资源下载(资源刚上传&#xff0c;还在审核中) &#xff08;免费&#xff09;菜狗学前端之ES6笔记https://download.csdn.net/download/m0_58355897/89135424 一 解构赋值 解构赋值 解构指的是把一个数据…