下载资源前端资源详情
17vue侦听器watch精彩案例分享.zip
大小:543.75KB
价格:42积分
下载量:0
评分:
5.0
上传者:chinayun_6401
更新日期:2025-09-22

vue侦听器watch精彩案例分享

资源文件列表(大概)

文件名
大小
17vue侦听器watch精彩案例分享/
-
17vue侦听器watch精彩案例分享/css/
-
17vue侦听器watch精彩案例分享/css/element-plus.css
319.25KB
17vue侦听器watch精彩案例分享/index.html
2.54KB
17vue侦听器watch精彩案例分享/js/
-
17vue侦听器watch精彩案例分享/js/element-plus.js
1.97MB
17vue侦听器watch精彩案例分享/js/vue.global.js
525.07KB

资源内容介绍

本资源方位地分享了watch 的经典案例。其中，对 watch 监视普通数据类型、对象类型以及数组类型通过丰富的案例进行了深入的分析。此外，还对比了计算属性与 watch 之间存在的差异，并同样借助案例加以剖析。最后，对 $watch 案例进行了全面的编写。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>watch</title> <link rel="stylesheet" href="./css/element-plus.css"/> <script src="./js/vue.global.js"></script> <script src="./js/element-plus.js"></script> <style scoped> .el-input{ margin-bottom:10px; } </style></head><body> <div id="app"> <el-divider content-position="left">普通数据类型</el-divider> <el-input v-model="userId"></el-input> <el-input v-model="userName"></el-input> <el-divider content-position="left">对象类型</el-divider> <el-input v-model="info.email"></el-input> <el-input v-model="info.mobile"></el-input> <el-divider content-position="left">数组类型</el-divider> <el-checkbox :label="item" v-for="(item,i) in likes" :key="i"></el-checkbox> <div><el-button type="primary" @click="changeArr">改变数组值</el-button></div> </div></body><script> const {createApp}=Vue; const app=createApp({ data(){ return{ userId:'23', userName:'Lucy', info:{ email:'test@demo.com', mobile:'13800000000' }, likes:['hiphop','singing','drawing'], } }, watch:{ // 监听：当userId值发生变化时触发 userId:{ handler(newId,oldId){ console.log(newId,oldId); } }, userName:{ handler(newName,oldName){ console.log(newName,oldName); }, immediate:true //在第一次绑定的时候执行监听函数 }, info:{ handler(newInfo,oldInfo){ console.log(newInfo,oldInfo); }, deep:true, immediate: true }, likes:{ handler(newLikes,oldLikes){ console.log(newLikes,oldLikes) }, immediate:true } }, methods:{ changeArr(){ this.likes=['街舞','唱歌','画画']; } } }) app.use(ElementPlus); app.mount('#app');</script></html>

用户评论 (0)

发表评论

captcha

相关资源

watch和computed的区别经典案例

本资源方位地分享了watch 的经典案例。其中，对 watch 监视普通数据类型、对象类型以及数组类型通过丰富的案例进行了深入的分析。此外，还对比了计算属性与 watch 之间存在的差异，并同样借助案例加以剖析。最后，对 $watch 案例进行了全面的编写。

544KB11积分

新技术天地JSP+JAVABEAN+MYSQL新闻发布v1.0

本系统分两部分管理,前台用于文章发布和用户文章发表,后台有管理员审核和不同权限的用户管理,具有高稳定性和安全性。整个站的全部数据逻辑运算完全有beans封装, 具有界面简洁、功能强大、操作方便等特点。本站后台默认的用户名和密码为admin,admin1. 本系统运行环境: (1)windows/linux(目前所用的服务器是redhat 8.0)+jdk1.4+resin+jdbc+mysql 本系统采用jsp编写,数据库采用的是MYSQL,使用JDBC驱动,所以要求有MYSQL的JDBC的驱动程序; (2)本程序的JDBC驱动程序在LIB目录下,在发布的时候放在resin的WEB-INF\lib目录下; 本程序的类文件在src目录下,发布的时候放在resin的发布目录的WEB-INF\classes下;

1.29MB43积分

信息办公学生课绩管理系统 jsp + servlet + javaBean + sql-server-scm.zip

本系统采用Servlet+Jsp+JavaBean+SQL2000 设计方式，其中Servlet担当主要逻辑控制，通过接受Jsp传来的用户请求，调用以及初始化JavaBean，在通过Jsp传到客户端，本系统中SqlBean担当主要的与数据库的连接与通信，JavaBean在本系统中主要担当配合Jsp以及Servlet来完成用户的请求，而Jsp主要担当接受与响应客户端。高校开发一学生课绩管理系统，该系统由登陆模块，学生模块，教师模块，管理员模块，四部分组成。其功能如下：学生登陆以后，可以选报课程。系统会根据学生所在系及课程的预修课判断（课程有系别，预修课等属性）。教师在本系统中拥有是否接受学生所选课程，以及给学生打分的权力，只有先接受学生，才能给该生打分。管理员在本系统中有着最高的权力，包括新增，更改，删除学生，教师，课程以及班级。

536.65KB23积分

截图工具离线111111111111

截图工具离线111111111111

14.11MB48积分