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.可扩展性和灵…

LC 70.爬楼梯

70.爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a; n 2 输出&#xff1a; 2 解释&#xff1a; 有两种方法可以爬到楼顶。 1 阶 1 阶2 阶 示例 2…

linux 常用的命令汇总

Linux 系统中有许多强大的命令&#xff0c;下面是一些常用和好用的命令汇总&#xff1a; 文件和目录操作 ls: 列出目录内容。cd: 更改当前目录。mkdir: 创建新目录。rmdir: 删除空目录。rm: 删除文件或目录。cp: 复制文件或目录。mv: 移动或重命名文件或目录。touch: 创建空文…

64B/66B编码

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

使用Git将文件夹上传到Github以及使用Git LFS上传大文件

使用Git将文件夹上传到Github以及使用Git LFS上传大文件

【高录用-快速见刊】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…

算法刷题记录 Day46

算法刷题记录 Day46 Date: 2024.04.13 lc 53. 最大子数组和 class Solution { public:int maxSubArray(vector<int>& nums) {// dp[i]表示以nums[i]结尾的连续子数组的最大和&#xff1b;// dp[i] max(nums[i], dp[i-1]nums[i]);若之前的最大和小于0&#xff0c;…

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驱动依赖 --…

【蓝桥杯日常】

美丽的2 #include <iostream> using namespace std; int main() {int cnt0; int tmp;for(int i1;i<2020;i){tmpi;//避免改变i的值while(tmp){if(tmp%102){cnt;break;//有2就跳出循环} tmp/10;}}cout<<cnt;return 0; }基础不牢地动山摇是我这样的。这个题花费的…

韩顺平 | 零基础快速学Python(15) 错误和异常

概述 Python有两种不同的错误&#xff1a;语法错误和异常。 语法错误SyntaxError/句法错误/解析错误&#xff1a;执行前编译器检测到的错误。语法错误也是一种异常&#xff0c;SyntaxError继承Exception。 异常Exception&#xff1a;执行时检测到的错误。 需求&#xff1a;出…

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

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

Linux命令-dris命令(显示和清空目录堆栈中的内容)

说明 dris命令 用于显示和清空目录堆栈中的内容。 语法 dris(选项)选项 n&#xff1a;显示从左边算起第n笔的目录&#xff1b; -n&#xff1a;显示从右边算起第n笔的目录&#xff1b; -l&#xff1a;显示目录完整的记录。

Java 8 Date API:深挖`LocalDate.plusWeeks(1)`方法的使用及潜在“陷阱”

这里写目录标题 引言方法介绍潜在“陷阱”与注意事项1. 对于跨越月份和年份边界的情况2. ISO周定义的影响3. 时间区间的理解和使用 正确使用与规避“陷阱”结语 引言 在Java 8中&#xff0c;日期时间API进行了全面改革&#xff0c;引入了新的java.time包&#xff0c;其中的Loca…

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

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

数据库(1)

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

kotlin基础学习教程以及代码案例

基础概念和知识点&#xff1a; Kotlin的基础语法涵盖了许多重要的知识点&#xff0c;以下是其中的一些核心要素&#xff1a; 变量与常量&#xff1a; var 关键字用于声明可变的变量。val 关键字用于声明只读的变量&#xff0c;即常量。const val 用于编译时常量&#xff0c;只…

Alibaba --- 如何写好 Prompt ?

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

Kotlin - 时间 Duration

一、概念 用于表示时间度量&#xff0c;简化了时间单位的换算、计算时间差、操作间隔、比较等场景。 二、使用 2.1 创建 2.1.1 Number -> Duration 扩展函数适用于 Int、Long、Double。Duration 可以是正、负、零、正无穷大或负无穷大。 nanosecondspublic inline val Int…