antV+vue3 单选框选中加入逻辑运算,再次点击取消选中,不计入逻辑运算

文章目录

  • antV+vue3 单选框选中加入逻辑运算,再次点击取消选中,不计入逻辑运算
    • 需求
    • 增加点击事件
    • 逻辑处理
    • 效果

antV+vue3 单选框选中加入逻辑运算,再次点击取消选中,不计入逻辑运算

在这里插入图片描述

需求

在做项目时,多次遇到单选框需要再次点击时取消选中的效果,上次感觉没有遇到困难就没有记录,这次增加了逻辑计算,在此记录一下。

参数选择处需要增加再次选择进行取消选择的操作。
数学逻辑是在选中参数选择时,参数选择需要参与运算,不选择时,不参与运算。

在这里插入图片描述

增加点击事件

之前不需要取消的单选框正常使用change就可以,需要第二次点击取消选中的单选框使用change无法达到想要的效果,所以我们这里给他增加一个click事件。
在这里插入图片描述

逻辑处理

getComplianceDesc方法:
由于不需要进行额外的判断,直接进行逻辑判断即可

const getComplianceDesc = () => {let d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (d == 1) {formStateEdit.value.score = 0} else if (d == 2) {formStateEdit.value.score = '/'} else if ((d == 0 && a == 1 && k == 0) || (d == 0 && a == 0 && k == 1)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.5).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = (0.5).toFixed(4)}} else if ((d == 0 && a == 0 && k == 0) || (d == 0 && a == 2 && k == 2)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 1).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = (1).toFixed(4)}} else {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.25).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = (0.25).toFixed(4)}}}

getNowRaValue 方法:

	const lastRaValue = ref()const newRaValue = ref()const getNowRaValue = (key) => {newRaValue.value = keyif (newRaValue.value === lastRaValue.value) {newRaValue.value = undefinedlastRaValue.value = undefinedformStateEdit.value.raValue = undefinedlet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (d == 1) {formStateEdit.value.score = 0} else if (d == 2) {formStateEdit.value.score = '/'} else if ((d == 0 && a == 1 && k == 0) || (d == 0 && a == 0 && k == 1)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.5).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = 0.5}} else if ((d == 0 && a == 0 && k == 0) || (d == 0 && a == 2 && k == 2)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 1).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = 1}} else {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.25).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = 0.25}}} else {lastRaValue.value = newRaValue.valueformStateEdit.value.raValue = newRaValue.valuelet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (d == 1) {formStateEdit.value.score = 0} else if (d == 2) {formStateEdit.value.score = '/'} else if ((d == 0 && a == 1 && k == 0) || (d == 0 && a == 0 && k == 1)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.5).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = 0.5}} else if ((d == 0 && a == 0 && k == 0) || (d == 0 && a == 2 && k == 2)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 1).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = 1}} else {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.25).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = 0.25}}}}

getNowRkValue方法:

const lastRkValue = ref()const newRkValue = ref()const getNowRkValue = (key) => {newRkValue.value = keyif (newRkValue.value === lastRkValue.value) {newRkValue.value = undefinedlastRkValue.value = undefinedformStateEdit.value.rkValue = undefinedlet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (d == 1) {formStateEdit.value.score = 0} else if (d == 2) {formStateEdit.value.score = '/'} else if ((d == 0 && a == 1 && k == 0) || (d == 0 && a == 0 && k == 1)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.5).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = 0.5}} else if ((d == 0 && a == 0 && k == 0) || (d == 0 && a == 2 && k == 2)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 1).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = 1}} else {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.25).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = 0.25}}} else {lastRkValue.value = newRkValue.valueformStateEdit.value.rkValue = newRkValue.valuelet d = formStateEdit.value.dValue,a = formStateEdit.value.aValue,k = formStateEdit.value.kValue,ra = formStateEdit.value.raValue,rk = formStateEdit.value.rkValueif (d == 1) {formStateEdit.value.score = 0} else if (d == 2) {formStateEdit.value.score = '/'} else if ((d == 0 && a == 1 && k == 0) || (d == 0 && a == 0 && k == 1)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.5).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.5).toFixed(4)} else {formStateEdit.value.score = 0.5}} else if ((d == 0 && a == 0 && k == 0) || (d == 0 && a == 2 && k == 2)) {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 1).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 1).toFixed(4)} else {formStateEdit.value.score = 1}} else {if (ra) {if (rk) {formStateEdit.value.score = (Number(ra) * Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = (Number(ra) * 0.25).toFixed(4)}} else if (rk) {formStateEdit.value.score = (Number(rk) * 0.25).toFixed(4)} else {formStateEdit.value.score = 0.25}}}}

注意:

  1. 首次打开编辑页面时候,需要给lastRaValue、lastRkValue赋上初值。
  2. 可以Number()字符串转数字类型以及.toFixed(4)保留一下小数,不然会出现超额数字出现随机数(概率挺高的,这里的ra为0.2,rk为1.2的时候,基本都会出现,所以加上了这两个操作)。
    在这里插入图片描述

此外,getNowRaValue以及getNowRkValue方法存在大量逻辑冗余,曾尝试直接给formStateEdit.value.raValue、formStateEdit.value.rkValue赋值,然后进行逻辑操作,但是失败了,大家有需要可以精进一下。

效果

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/845010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2024新版】银系统源码/超市收银系统/智慧新零售/ERP进销存管理/线上商城/商户助手

>>>系统简述:本系统适用于超吃便利店,美妆母婴行业,服装鞋帽行业,食品零售行业,3C数码电子行业,食品生鲜等一切零售行业,产品功能角色介绍如下 合伙人:无限发展代理商和商…

Pod 控制器

前言 Pod 是 Kubernetes 集群中能够被创建和管理的最小部署单元。所以需要有工具去操作和管理它们的生命周期,这里就需要用到控制器了。 Pod 控制器由 master 的 kube-controller-manager 组件提供,常见的此类控制器有 Replication Controller、ReplicaSet、Deploym…

React-生成随机数和日期格式化

生成随机数 uuid文档:https://github.com/uuidjs/uuid npm install uuid import {v4 as uuidV4} from uuid 使用: uuidV4() 日期格式化 dayjs文档:安装 | Day.js中文网 npm install dayjs import dayjs from dayjs

算法-扫描线

目录 什么是扫描线算法? 扫描线简单应用 更多的扫描线 什么是扫描线算法? 在计算几何中,扫描线算法(scan line algorithm)一般用来解决几何图形的面积交并,周长交并问题,扫描线算法的核心思想…

SAPUI5基础知识3 - 引导过程(Bootstrap)

1. 背景 在上一篇博客中,我们已经建立出了第一个SAPUI5项目,接下来,我们将为这个项目添加引导过程。 在动手练习之前,让我们先解释一下什么引导过程。 1.1 什么是引导过程? 在计算机科学中,引导过程也称…

5、css3 自动动画渐变背景

效果例图&#xff1a;&#xff08;因gif图片太大&#xff0c;而csdn只能上传小于5m图片&#xff0c;所以无法上传&#xff09; 1、首先上传html代码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8">&l…

【鸟哥】Linux笔记-硬件搭配

在Linux这个系统当中&#xff0c;几乎所有的硬件设备文件都在/dev这个目录内。打印机与软盘呢&#xff1f;分别是/dev/lp0, /dev/fd0。 几个常见的设备与其在Linux当中的文件名&#xff1a; 如果你的机器使用的是跟网际网络供应商 &#xff08;ISP&#xff09; 申请使用的云端…

二叉树的构建和遍历(oj题)

一、题目链接 https://www.nowcoder.com/practice/4b91205483694f449f94c179883c1fef?tpId60&&tqId29483&rp1&ru/activity/oj&qru/ta/tsing-kaoyan/question-ranking 二、题目思路 利用先序遍历的方法&#xff0c;构建二叉树。为了保证在递归中&#xf…

USB主机模式——Android

理论 摘自&#xff1a;USB 主机和配件概览 | Connectivity | Android Developers (google.cn) Android 通过 USB 配件和 USB 主机两种模式支持各种 USB 外围设备和 Android USB 配件&#xff08;实现 Android 配件协议的硬件&#xff09;。 在 USB 主机模式下&#xff0…

Redis 中的 Zset 数据结构详解

目录 用法 1. 增 2. 删 3. 查 4. 交&#xff0c;并 编码方式 应用场景 Redis 中的 Zset&#xff08;有序集合&#xff09;是一种将元素按照分数进行排序的数据结构。与上篇写的SetRedis 中的 Set 数据结构详解不同&#xff0c;Zset 中的每个元素都关联一个浮点数类型的…

Jmeter的线程组之间传递参数

使用jemter做接口测试&#xff0c;有时候需要会遇到不同线程组之间调用相同变量的情况&#xff0c;最多见的就是token的传递&#xff0c;网上有很多处理方法&#xff0c;这里只记录setProperty的办法&#xff0c;一招鲜走遍天&#xff01; 首先我有两个线程组&#xff1a; 线程…

vm:为虚拟机配置多个虚拟网卡(ubuntu20.04)

前言&#xff1a; 环境&#xff1a;虚拟机 ubuntu 20.04 要求&#xff1a;如标题&#xff0c;但是这里针对的是 ubuntu 20.04&#xff0c;对于其他操作系统&#xff0c;可以找一下其他操作系统对应的配置文件是什么 vm 添加虚拟网卡 首先进入 vm&#xff1a; 点击设置&#xf…

JVM监控-JMX探针的安装和使用

jvm监控的搭建和使用 ​ Java Management Extensions&#xff08;JMX&#xff09;是一种Java标准&#xff0c;用于管理和监控Java应用程序&#xff0c;特别是分布式系统。它提供了一种标准化的方式来管理应用程序的各种方面&#xff0c;包括性能监控、配置更改、事件通知等。目…

nodemcu32s 和 mini D1 组局域网并用 webSocket 通信

实现思路 使用 mini D1 来搭建一个 webSocket 服务&#xff0c;然后使用 nodemcu32 连接&#xff0c;然后就可以进行通信了。 服务端代码&#xff08;mini D1&#xff09; 在代码中主要是需要控制好 loop 函数中的延时&#xff0c;也就是最后一行代码 delay&#xff0c;如果…

JS-51-Node.js10-yarn

一、yarn的简介 Yarn 是一款 JavaScript 的包管理工具&#xff08;npm的代替方案&#xff09;&#xff0c;是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。 正如 Yarn 官网的介绍&#xff0c;Yarn 的具有速度快 、安全 、可靠 的优点&#x…

MathType2025数学公式编辑器有哪些新增功能?

在当今科技飞速发展的时代&#xff0c;数学、科学和工程教育领域对于精确性和效率的要求日益增高。随着教育数字化的不断深入&#xff0c;传统的教学方式和科研手段正逐渐被新型的数字工具所取代。在这一过程中&#xff0c;MathType作为一款强大的数学公式编辑器&#xff0c;其…

多维时序 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预测

多维时序 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预测 目录 多维时序 | Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现SA-BP模拟退火算法优化BP神经网络多变量时间序列预…

React-组件通信

组件通信 概念&#xff1a;组件通信就是组件之间的数据传递&#xff0c;根据组件嵌套关系的不同&#xff0c;有不同的通信方法 父传子 基础实现 实现步骤&#xff1a; 1.父组件传递数据-在子组件标签上绑定属性 2.子组件接收数据-子组件通过props参数接收数据 props说明 1.…

哪个牌子的无线麦克风好用?全网揭秘无线麦克风一拖二哪个牌子好

​在浩瀚的音频产品海洋中&#xff0c;如何挑选一款适合自己的无线领夹麦克风&#xff1f;这确实是一个值得深思的问题。今天&#xff0c;我为你精心推荐这几款无线领夹麦克风&#xff0c;它以其卓越的音质、稳定的性能和便捷的无线连接&#xff0c;赢得了众多用户的青睐。无论…

独家首发 | 基于多级注意力机制的并行预测模型

基于Transformer-BiGRUGlobalAttention-CrossAttention的并行预测模型! 往期精彩内容&#xff1a; 时序预测&#xff1a;LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;Transformer-BiGRU预测模型-CSDN博客 独家原创 | 基…