Watch(监视器)+(综合案例)

2024-01-22 20:04
文章标签 综合 案例 watch 监视器

本文主要是介绍Watch(监视器)+(综合案例),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Watch侦听器(监视器)

作用:监视数据变化,执行一些业务逻辑或异步操作
语法:
①简单写法 → 简单类型数据,直接监视
②完整写法 → 添加额外配置项
在这里插入图片描述

①简单写法

在这里插入图片描述

<!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="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言:</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span>文档翻译</span></div><div class="output-wrap"><div class="transbox">meal</div></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const app = new Vue({el:'#app',data:{//words:''obj:{words:''}},//该方法会在数据变化时调用执行//newValue新值,oldValue老值(一般不用,可以删掉)// words(newValue,oldValue){// }watch:{'obj.words' (newValue){console.log('变化了',newValue)}}})</script>
</body>
</html>

以下部分为上述代码的业务实现👇(延时器:防抖)
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.output-wrap{width: 200px;height: 200px;background-color: aquamarine;}</style>
</head>
<body>
<div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言:</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>//接口地址:https://applet-base-apl-t.ithelma.net/api/translate//请求方式:get//请求参数:// 1.words:需要被翻译的文本(必传)// 2.lang:需要被翻译成的语言(可选)默认值-意大利const app = new Vue({el:'#app',data:{obj:{words:'',lang:'italy'},result:'',//翻译结果},watch:{'obj.words' (newValue){clearTimeout(this.timer)this.timer = setTimeout (async () => {const res = await axios({url:'https://applet-base-api-t.itheima.net/api/translate',params:{words:newValue}})this.result = res.data.dataconsole.log(res.data.data)},300)},     //如果每次都要写一遍这个,太麻烦了修改此方法,可以一次性全部监视}})</script>
</body>
</html>

②完整写法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.output-wrap{width: 200px;height: 200px;background-color: aquamarine;}</style>
</head>
<body>
<div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言:</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>//接口地址:https://applet-base-apl-t.ithelma.net/api/translate//请求方式:get//请求参数:// 1.words:需要被翻译的文本(必传)// 2.lang:需要被翻译成的语言(可选)默认值-意大利const app = new Vue({el:'#app',data:{obj:{words:'我是你爸爸',lang:'italy'},result:'',//翻译结果},watch:{//完整写法要写成一个对象obj:{deep:true,//深度监视:对所有都进行监视immediate:true,//立刻执行,已进入页面,handler就立刻执行一次handler (newValue) {//此时 handler只会在数据修改的时候触发,所以如果先设定的话,他不会自动翻译,要输入一下才能翻译 //所以就要用到第二个配置项:immediate:trueclearTimeout(this.timer)this.timer = setTimeout (async () => {const res = await axios({url:'https://applet-base-api-t.itheima.net/api/translate',params: newValue//{//因为默认值是意大利,所以除了传words,还要传langi//words:newValue  //这里的newValue包括了words和lang,所以可以直接丢newValue//}})this.result = res.data.dataconsole.log(res.data.data)},300)}}// 'obj.words' (newValue){//    clearTimeout(this.timer)//    this.timer = setTimeout (async () => {//     const res = await axios({//         url:'https://applet-base-api-t.itheima.net/api/translate',//         params:{//             words:newValue//         }//     })i//     this.result = res.data.datai//     console.log(res.data.data)//    },300)// },     如果每次都要写一遍这个,太麻烦了修改此方法,可以一次性全部监视}})</script>
</body>
</html>

案例:水果购物车

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

</head><body><div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="http://autumnfish.cn/static/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main" v-if="fruitList.length >0"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item,index) in fruitList" :key="item.id" class="tr" :class="{active:item.isChecked}"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{ item.price }}</div><div class="td"><div class="my-input-number"><button :disabled="item.num <=1" class="decrease" @click="sub(item.id)"> - </button><span class="my-input__inner">{{ item.num }}</span><button class="increase" @click="add(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div class="td"><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="isAll" />全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span><!-- 结算按钮 --><button class="pay">结算( {{ totalCount }} )</button></div></div></div><!-- 空车 --><div class="empty" v-else>🛒空空如也</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const defaultArr = [{id: 1,icon: './火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: './荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: './榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: './鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: './樱桃.png',isChecked: false,num: 20,price: 34,},]const app = new Vue({el: '#app',data: {// 水果列表fruitList:JSON.parse(localStorage.getItem('list')) || defaultArr,},computed:{// isAll () {//     //必须所有的小选框都选中,全选按钮才选中 → every//     return this.fruitList.every(item => item.isChecked)//本身就是一个布尔值,所以=== true可以不写// }//完整写法=get + setisAll:{get (){return this.fruitList.every(item => item.isChecked)},set (value){//基于拿到的布尔值,要让所有的小选框,同步状态this.fruitList.forEach(item => item.isChecked = value)//一个等号赋值}},//统计选中的总数 totalCount(){return this.fruitList.reduce((sum,item) => {if (item.isChecked){//选中,需要累加return sum + item.num} else{//没选中,不需要累加return sum}},0)},//总计选中的总价 num* price,把这个再做累加totalPrice(){return this.fruitList.reduce((sum,item) => {if (item.isChecked) {return sum + item.num * item.price}else {return sum}},0)}},methods:{del(id){this.fruitList = this.fruitList.filter(item => item.id !== id)},add (id){//1.根据id找到数组中的对应项 → findconst fruit = this.fruitList.find(item => item.id === id)//是否和传过来的id相同,//如果是,那么就是它,然后操作数量//2.操作num数量fruit.num++},sub(id){//1.根据id找到数组中的对应项 → findconst fruit = this.fruitList.find(item => item.id === id)//是否和传过来的id相同,//如果是,那么就是它,然后操作数量//2.操作num数量fruit.num--}},watch:{fruitList:{deep:true,handler( newValue){// 需要将变化后的 newValue 存入本地 (转JSON)localStorage.setItem('list',JSON.stringify(newValue))}}}})</script></body></html>

这篇关于Watch(监视器)+(综合案例)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/634093

相关文章

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名,员

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图

使用Navicat工具比对两个数据库所有表结构的差异案例详解

《使用Navicat工具比对两个数据库所有表结构的差异案例详解》:本文主要介绍如何使用Navicat工具对比两个数据库test_old和test_new,并生成相应的DDLSQL语句,以便将te... 目录概要案例一、如图两个数据库test_old和test_new进行比较:二、开始比较总结概要公司存在多

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

Golang操作DuckDB实战案例分享

《Golang操作DuckDB实战案例分享》DuckDB是一个嵌入式SQL数据库引擎,它与众所周知的SQLite非常相似,但它是为olap风格的工作负载设计的,DuckDB支持各种数据类型和SQL特性... 目录DuckDB的主要优点环境准备初始化表和数据查询单行或多行错误处理和事务完整代码最后总结Duck

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1:查询所有有库存的商品信息案例2:使用EX

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于