前端vue按钮控制切换按钮是否禁用和颜色和显示隐藏,利用v-if和v-else

效果

未输入input前图片

请添加图片描述

输入input后图片

请添加图片描述

html

(1)

<input type="number" placeholder="请输入分润数量" placeholder-class="shareprofit_placeholder_num" v-model="money">
<!-- 金钱 -->
{{money}}
<!-- 可提现余额 -->
{{balance}}
<button v-if="money*1<=balance*1" type="primary" @click="popup">提交申请</button>
<button v-else disabled @click="popup">未提交申请</button>

(2)

<view v-if="money*1<=balance*1" @click="shareprofitSubmit" class="consumption_btn">分润</view>
<view v-else class="consumption_btn_gray">无法分润</view>

JS

data() {return {balance:'',money: '',}
},

总结

利用v-if和v-else控制切换按钮

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

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

相关文章

【【萌新编写risc-v之软件的学习使用】】

萌新编写risc-v软件的学习使用 对于vscode我其实没什么好说的 就是先配置好环境 其实vscde作为一个编译器的软件 其实并不需要指望能往里面加载多少功能 我们需要做的就是赋予编辑器更好用的功能和体验 有些人会在vscode里面甚至加入波形 仿真 我觉得不如交给 vivado来用 在vs…

PyTorch实战-实现神经网络图像分类基础Tensor最全操作详解(一)

目录 前言 一、PyTorch数据结构-Tensor 1.什么是Tensor 2.数据Tensor使用场景 3.张量形态 标量&#xff08;0D 张量&#xff09; 向量&#xff08;1D 张量&#xff09; 矩阵(2D张量) 3D 张量与高维张量 二、Tensor的创建 1. 从列表或NumPy数组创建 2. 使用特定的初始…

套接字、信号、管道、消息队列、信号量、共享内存的使用场景

套接字 Socket&#xff08;套接字&#xff09;通常在以下场景中使用&#xff1a; 网络通信&#xff1a;Socket最常见的用途是进行网络通信。通过Socket&#xff0c;可以在不同计算机之间建立连接&#xff0c;并进行数据交换。例如&#xff0c;客户端和服务器之间的通信、对等节…

Vue使用for循环加Promise.all来发送多个请求,并且等到所有请求结束后处理数据

项目场景&#xff1a; 项目中要根据一个模型 id 的数组列表&#xff0c;来查询所有模型的数据我需要对同一个接口循环发送多个请求&#xff0c;次数不定必须等所有结果返回后&#xff0c;再处理数据&#xff0c;并展示 实现方法&#xff1a; <script> export default …

分拣平台API安全治理实战 | 京东物流技术团队

导读 本文主要基于京东物流的分拣业务平台在生产环境遇到的一些安全类问题&#xff0c;进行定位并采取合适的解决方案进行安全治理&#xff0c;引出对行业内不同业务领域、不同类型系统的安全治理方案的探究&#xff0c;最后笔者也基于自己在金融领域的经验进行了关于API网关治…

学习记忆——英语篇

文章目录 英语字母形象起源右脑记忆单词的原则四大步骤第一步&#xff1a;摄取信息第二步&#xff1a;处理信息第三步&#xff1a;储存信息第四步&#xff1a;提取信息 训练例子字母形象训练 右脑记忆单词5大方法字源法编码法字母编码法字母组合编码法 拼音法全拼法拼音组合 熟…

创建对象四种方式JAVA

面试题经常见到&#xff0c;就顺带整理下&#xff0c;创建对象的四种方式&#xff1a; 1.使用new创建对象 2.使用反射创建对象 3.使用clone创建对象 4.使用序列化反序列化创建对象 代码如下&#xff1a; import java.io.*; import java.lang.reflect.Constructor; import…

Navicat连接openGauss数据库报错

错误信息&#xff1a;fe_sendauth:invalid authentication request from server:AUTH_REQ_SASL_CONT without AUTH_REQ_SASL 解决步骤&#xff1a; 1&#xff09;关闭防火墙&#xff1a; 切换root用户执行&#xff1a;su - root 输入密码 systemctl status firewalld 查…

神经网络 01(介绍)

一、神经网络 人工神经网络 (Artificial Neural Network&#xff0c;简写为ANN)也简称为神经网络 (NN)&#xff0c;是一种模仿生物神经网络结构和功能的 计算模型。人脑可以看做是一个生物神经网络&#xff0c;由众多的神经元连接而成。各个神经元传递复杂的电信号&#xff0c…

Orca LLM:模拟 ChatGPT 的推理过程

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 介绍 在大型语言模型&#xff08;LLM&#xff09;领域&#xff0c;人们一直在追求在不影响其效率的情况下增强小型模型的功能。传统的方法是使用模仿学习&#xff0c;其中较小的模型从大型基础模型&#xff08;LFM&am…

Vue3事件处理

文章目录 Vue3事件处理1. 概念2. 实例2.1 点击按钮次数12.2 v-on 可以接收一个定义的方法来调用2.3 内联 JavaScript 语句2.4 事件处理程序中调用多个方法 3. 事件修饰符4. 按键修饰符 Vue3事件处理 1. 概念 使用 v-on 指令来监听 DOM 事件&#xff0c;从而执行 JavaScript 代…

教务管理系统的开发与实现开题报告

本课题的研究目的和意义 近年来&#xff0c;随着科学技术水平的迅猛发展和管理水平的不断提高&#xff0c;计算机已经被广泛应用于日常管理之中&#xff0c;它的运用不断改进了管理模式&#xff0c;使管理日趋程序化、规范化、现代化&#xff1b;而且极大地提高了工作效率。 …

计算机网络初识

目录 1、计算机网络背景 网络发展 认识 "协议" 2、网络协议初识 OSI七层模型 TCP/IP五层(或四层)模型 3、网络传输基本流程 网络传输流程图 数据包封装和分用 4、网络中的地址管理 认识IP地址 认识MAC地址 1、计算机网络背景 网络发展 在之前呢&…

【C语言】库宏offsetof

一.offsetof简介 因此,宏offsetof的作用是: 当你传入结构体的类型及其成员时,它会返回该成员在结构体中的偏移量. 二.offsetof的使用 如下,我们使用offsetof打印一下结构体foo中,成员a,成员b及成员c相对于首地址的偏移量分别是多少: #include <stdio.h> #include …

模板学堂|数据可视化仪表板大屏设计流程梳理

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场&#xff08;https&#xff1a;//dataease.io/templates/&#xff09;。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板&#xff0c;方便用户根据自身的业务需求和使用场景选择对应的仪表板模板&a…

更多场景、更多选择,Milvus 新消息队列 NATS 了解一下

在 Milvus 的云原生架构中&#xff0c;消息队列&#xff08;Log Broker&#xff09;可谓任重道远&#xff0c;它不仅要具备流式数据持久性、支持 TT 同步、事件通知等能力&#xff0c;还要确保工作节点从系统崩溃中恢复时增量数据的完整性。 在 Milvus 的架构中&#xff0c;一切…

中国各省市相关图标

中国各省市相关图标

预约到家按摩小程序开发定制同城服务

随着生活节奏加快&#xff0c;生活压力也随之而来&#xff0c;很多人忙于工作与生计&#xff0c;身体和心理两方面都在承受重压。而按摩能够消除身体的疲惫&#xff0c;增强人的身体体质&#xff0c;在劳累过后放松身心按摩一会儿&#xff0c;可以快速恢复精神状态&#xff0c;…

vue computed作用特点及使用场景及示例

在Vue中&#xff0c;computed是一种计算属性&#xff0c;用于根据已有的数据属性进行计算&#xff0c;返回一个新的属性值。computed属性具有以下特点&#xff1a; 特点 缓存 computed的计算结果会被缓存&#xff0c;只有依赖的数据发生变化时&#xff0c;才会重新计算。这种…

Leetcode376. 摆动序列

Every day a Leetcode 题目来源&#xff1a;376. 摆动序列 解法1&#xff1a;动态规划 约定&#xff1a; 某个序列被称为「上升摆动序列」&#xff0c;当且仅当该序列是摆动序列&#xff0c;且最后一个元素呈上升趋势。某个序列被称为「下降摆动序列」&#xff0c;当且仅当…