vue侦听器watch精彩案例分享

chinayun_6401ZIP17vue侦听器watch精彩案例分享.zip  543.75KB

资源文件列表:

ZIP 17vue侦听器watch精彩案例分享.zip 大约有7个文件
  1. 17vue侦听器watch精彩案例分享/
  2. 17vue侦听器watch精彩案例分享/css/
  3. 17vue侦听器watch精彩案例分享/css/element-plus.css 319.25KB
  4. 17vue侦听器watch精彩案例分享/index.html 2.54KB
  5. 17vue侦听器watch精彩案例分享/js/
  6. 17vue侦听器watch精彩案例分享/js/element-plus.js 1.97MB
  7. 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>
100+评论
captcha
    相关资源