下载资源前端资源详情
18watch和computed的区别经典案例.zip
大小:544KB
价格:11积分
下载量:0
评分:
5.0
上传者:chinayun_6401
更新日期:2025-09-22

watch和computed的区别经典案例

资源文件列表(大概)

文件名
大小
18watch和computed的区别经典案例/
-
18watch和computed的区别经典案例/css/
-
18watch和computed的区别经典案例/css/element-plus.css
319.25KB
18watch和computed的区别经典案例/index.html
3.22KB
18watch和computed的区别经典案例/js/
-
18watch和computed的区别经典案例/js/element-plus.js
1.97MB
18watch和computed的区别经典案例/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和computed的区别</title> <link rel="stylesheet" href="./css/element-plus.css"/> <script src="./js/vue.global.js"></script> <script src="./js/element-plus.js"></script></head><body> <div id="app"> <el-form :model="form" ref="form" :rules="rules" label-width="120px"> <el-form-item prop="price" label="商品价格"> <el-input v-model="form.price" placeholder="请输入商品价格"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">确定</el-button> </el-form-item> </el-form> <h3>商品信息</h3> <p>原价：{{originalPriceUnit}}</p> <el-divider content-position="left">computed</el-divider> <p>会员价：{{memberPrice}}</p> <el-divider content-position="left">watch</el-divider> <p>vip：{{vipPrice}}</p> </div></body><script> const {createApp}=Vue; const app=createApp({ data(){ const validatePrice=(rule,val,callback)=>{ const regex = /^\d+(?:\.\d{1,2})?$/; if (regex.test(val)) { callback(); } else { callback(new Error('请输入正确的商品价格')); } } return{ form:{ price:null, }, originalPriceUnit:null, originalPrice:null, vipPrice:null, rules:{ price:[ {required: true,message:'必填项', trigger:'blur'}, {validator: validatePrice,trigger:'blur'} ] } } }, computed:{ memberPrice(){ console.log('computed'); if(this.originalPrice===null){ return null } return this.unit(this.originalPrice * 0.95); } }, watch:{ originalPrice:{ handler(newVal,oldVal){ console.log('watch'); console.log(newVal,oldVal); this.vipPrice = this.unit(newVal * 0.8); } } }, methods:{ submitForm(){ this.$refs['form'].validate(valid=>{ if(valid){ let originalPrice=parseFloat(this.form.price); this.originalPrice=originalPrice; this.originalPriceUnit=this.unit(originalPrice); } }) }, unit(num){ return num.toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' }); } } }) app.use(ElementPlus); app.mount('#app');</script></html>

用户评论 (0)

发表评论

captcha

相关资源

新技术天地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积分

vue动态绑定 class 的丰富案例

本资源将全方位地为您呈现 v-bind 动态绑定 class 的丰富案例，其中涵盖了绑定字符串、数组、对象以及函数等详尽且深入的案例分析。仅需这一篇，就能让您对 v-bind 动态绑定 class 有全面而透彻的理解。

543.7KB29积分