uni-app:实现数字文本框,以及左右加减按钮

效果

 代码

 

<template><view><view class='line3'><view class='line3_position'><view class='left'>数量<text>*</text></view> <view class="right"><view class="quantity_btn"><view class="minus_quantity" @click="decrease">-</view><input class="input_quantity" type="number" v-model="quantity" @input="handleInput"><view class="add_quantity" @click="increase">+</view></view></view></view></view></view>
</template><script>export default {data() {return {quantity: 1};},methods: {handleInput(event) {const value = parseInt(event.target.value);if (!isNaN(value) && value >= 1) {this.quantity = value;} else {this.quantity = 1;}},increase() {this.quantity++;},decrease() {if (this.quantity > 1) {this.quantity--;}}}};
</script>
<style lang="scss">.quantity_btn {display: flex;width: 50%;.add_quantity {border: 1px solid #74bfe7;text-align: center;width: 25%;}.input_quantity {// border-bottom: 1px solid #74bfe7;text-align: center;width: 50%;}.minus_quantity {border: 1px solid #74bfe7;text-align: center;width: 25%;}}.line3 {padding: 20rpx;// border: 1px solid black;.line3_position{width: 100%;display: flex;.left {width: 30%;// border: 1px solid black;}.right {display:flex;justify-content:flex-end;width: 70%;// border: 1px solid black;}}// border:1px solid black;}
</style>

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

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

相关文章

Mysql存储引擎InnoDB

一、存储引擎的简介 MySQL 5.7 支持的存储引擎有 InnoDB、MyISAM、Memory、Merge、Archive、Federated、CSV、BLACKHOLE 等。 1、InnoDB存储引擎 从MySQL5.5版本之后&#xff0c;默认内置存储引擎是InnoDB&#xff0c;主要特点有&#xff1a; &#xff08;1&#xff09;灾难恢…

Docker入门——保姆级

Docker概述 ​ —— Notes from WAX through KuangShen 准确来说&#xff0c;这是一篇学习笔记&#xff01;&#xff01;&#xff01; Docker为什么出现 一款产品&#xff1a;开发—上线 两套环境&#xff01;应用环境如何铜鼓&#xff1f; 开发 – 运维。避免“在我的电脑…

【肺炎分类数据集】数据量非常充足的新冠肺炎分类数据共享

一、肺炎数据集介绍&#x1f349;&#xff1a; 1.1 格式&#x1f388; 按照标准的格式分为了①训练集train&#xff08;134138575198张&#xff09;&#xff0c;②验证集val&#xff08;8816张&#xff09;&#xff0c;③测试集test&#xff08;234390624张&#xff09;&#…

C++学习笔记总结练习:正则表达式

正则表达式 目录 regex正则表达式的定义regex_match/search/replace正则表达式的三个操作smatch、sregex_iterator正则表达式的结果对象以及与其配套的迭代器。 参考文献 正则表达式总结 1 正则表达式基础 不考虑子表达式的内容 头文件 #include<regex>库组件 库组件作…

React Dva项目 简单引入models中的所有JS文件

我们前面接触的 Dva项目 models目录下的文件还要一个一个引入 其实体验并不是很好 而且如果项目很大那就比较麻烦了 我们可以在 models 下创建一个 index.js 文件 编写代码如下 const context require.context("./", false, /\.js$/); export default context.key…

冠达管理:A股三大指数震荡整理 机构看好反弹趋势延续

周一&#xff0c;沪深两市呈弱势震动格式&#xff0c;创业板指领跌。到收盘&#xff0c;上证综指跌0.59%&#xff0c;报3268.83点&#xff1b;深证成指跌0.83%&#xff0c;报11145.03点&#xff1b;创业板指跌1%&#xff0c;报2240.77点。 资金面上&#xff0c;沪深两市昨日合计…

梳理日常开发涉及的负载均衡

负载均衡是当前分布式微服务时代最能提及的词之一&#xff0c;出于对分层、解耦、弱依赖、可配置、可靠性等概念的解读&#xff0c;一对一的模式变得不再可信赖&#xff0c;千变万化的网络环境中&#xff0c;冗余和备份显得格外重要&#xff0c;稍大型的系统就会存在大量微服务…

docker小白第一天

docker小白第一天 docker是什么docker理念容器与虚拟机比较docker能干什么docker官网介绍docker的基本组成docker平台架构 docker是什么 系统平滑移植&#xff0c;容器虚拟化技术。即源代码配置环境版本&#xff0c;打个包形成一个镜像文件&#xff0c;即软件带环境一起安装&a…

【果树农药喷洒机器人】Part1:研究现状分析以及技术路线介绍

本专栏介绍&#xff1a;付费专栏&#xff0c;持续更新机器人实战项目&#xff0c;欢迎各位订阅关注。 关注我&#xff0c;带你了解更多关于机器人、嵌入式、人工智能等方面的优质文章&#xff01; 文章目录 一、项目背景二、国内外研究现状2.1 国内研究现状2.2 国外研究现状 三…

RISC-V架构的演变

随着苹果基于ARM的硅和新的RISC-V CPU的推出&#xff0c;对于CPU开发来说&#xff0c;这是一个令人兴奋的时刻&#xff0c;尽管开发人员的旅程目前对后者来说有点坎坷。 我最喜欢的理论是&#xff0c;没有发生是孤独的&#xff0c;而只是重复了以前发生过的事情&#xff0c;也…

Linux 远程登录

Linux 远程登录 Linux 一般作为服务器使用&#xff0c;而服务器一般放在机房&#xff0c;你不可能在机房操作你的 Linux 服务器。 这时我们就需要远程登录到Linux服务器来管理维护系统。 Linux 系统中是通过 ssh 服务实现的远程登录功能&#xff0c;默认 ssh 服务端口号为 2…

C++QT教程1——QT概述(下载与安装)

文章目录 1 Qt概述1.1 什么是Qt1.2 Qt的发展史1.3 Qt版本1.4 Qt的下载与安装下载地址&#xff1a;其实我是有点懵逼的&#xff0c;因为还有个qtcreator&#xff0c;我差点不知道下哪个。。。&#xff08;qt框架比qtcreator功能更多更强大&#xff09; 安装 1.5 Qt的优点1.6 QT成…

SpringBoot + Docker 实现一次构建到处运行~

一、容器化部署的好处 图片 Docker 作为一种新兴的虚拟化方式&#xff0c;它可以更高效的利用系统资源&#xff0c;不需要进行硬件虚拟以及运行完整操作系统等额外开销。 传统的虚拟机技术启动应用服务往往需要数分钟&#xff0c;而 Docker 容器应用&#xff0c;由于直接运行…

[数据分析大全]基于Python的数据分析大全——Numpy基础

目录 一、前言二、NumpyNumpy数组 二、创建数组初始化占位符 三、输入、输出3.1 保存与载入文本文件3.2 保存与载入磁盘上的文件 四、数据类型五、数组信息六、调用帮助七、数组计算7.1 算数运算7.2 比较7.3 聚集函数 八、数组复制九、数组排序十、子集、切片、索引相关实现10.…

深入大B行业,什么是最有力的敲门砖?

引言&#xff1a;2023上半年&#xff0c; 能扛过外部环境各种变化&#xff0c; 这样的科技公司就很不容易了。 【全球云观察 &#xff5c; 热点关注】在当前后疫情时代下&#xff0c;全球经济增长处于的低增长期&#xff0c;这对所有科技企业的发展带来了直接影响。 有业内人…

win10 2022unity设置中文

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言解决方法 前言 在Edit->preferences里找不到language选项。 解决方法 【1】打开下面地址 注意 :把{version}换成你当前安装的版本&#xff0c;比如说如果…

SpringBoot第33讲:SpringBoot集成ShardingJDBC - 基于JPA的读写分离

SpringBoot第33讲&#xff1a;SpringBoot集成ShardingJDBC - 基于JPA的读写分离 本文是SpringBoot第33讲&#xff0c;主要介绍分表分库&#xff0c;以及SpringBoot集成基于 ShardingJDBC 的读写分离实践 文章目录 SpringBoot第33讲&#xff1a;SpringBoot集成ShardingJDBC - 基…

天津最新python培训班就业形势 python能就业吗?

小编认为Python是一门非常适合学习的编程语言&#xff0c;无论性别如何。它易于学习、功能强大&#xff0c;并且在各个领域都有广泛的应用&#xff0c;因此&#xff0c;性别不应该成为学习Python的障碍&#xff0c;那么学习Python是否就能找到满意的工作呢&#xff1f; 这是一…

吃瓜教程-Task05

目录 支持向量机 间隔与支持向量 SVM基本型 对偶问题 kkt条件 例子 对偶问题 例子 对偶问题原理解释 软间隔与正则化 替代损失函数 支持向量回归 例子 支持向量机 间隔与支持向量 在样本空间中&#xff0c;划分超平面可通过如下线性方程来描述: 样本空间中任意点x到…