ZIPwatch和computed的区别经典案例 544KB

chinayun_6401

资源文件列表:

18watch和computed的区别经典案例.zip 大约有7个文件
  1. 18watch和computed的区别经典案例/
  2. 18watch和computed的区别经典案例/css/
  3. 18watch和computed的区别经典案例/css/element-plus.css 319.25KB
  4. 18watch和computed的区别经典案例/index.html 3.22KB
  5. 18watch和computed的区别经典案例/js/
  6. 18watch和computed的区别经典案例/js/element-plus.js 1.97MB
  7. 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>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIP新技术天地JSP+JAVABEAN+MYSQL新闻发布v1.01.29MB8月前
    ZIP信息办公学生课绩管理系统 jsp + servlet + javaBean + sql-server-scm.zip536.65KB8月前
    ZIP截图工具离线11111111111114.11MB8月前
    ZIPvue动态绑定 class 的丰富案例543.7KB8月前
    ZIPvue侦听器watch精彩案例分享543.75KB8月前
    ZIP遍历数组常见的方法案例543.91KB8月前
    ZIPpassword-brute-dictionary-master.zip1.76MB8月前
    ZIP《Delphi7 高效数据库程序设计》源码含数据库44.82MB8月前