vue input 限制输入,小数点后保留两位 以及 图片垂直居中显示 和 分享 git 小技巧

news2024/11/24 19:28:36

 (1)input 限制输入,小数点后保留两位

<template>
  <div>
    <el-input v-model="number" @input="checkNumber" @blur="completeNumber" placeholder="请输入"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '' // 初始值为空字符串
    }
  },
  methods: {
    checkNumber(value) {
      let number = value
        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        .replace(/^(-)*(\d+)\.(\d{0,2}).*$/, '$1$2.$3'); // 只能输入两个小数

      this.number = number;
    },
    completeNumber() {
      let number = this.number.trim(); // 去掉前后空格
      if (!number) {
        this.number = ''; // 如果数字为空,则清空输入框
        return; // 如果数字为空,不继续进行后续操作
      }
      let value = number;

      number = parseFloat(number).toFixed(2); // 将数字转换为浮点数再转换回字符串,去掉前导零
      if (number < 0 || number > 100) {
        this.$message.error({
          message: '输入的范围应为0-100%',
          duration: 400
        });
        this.number = undefined
        return
      }

      // 判断价格小数部分是否需要补全
      const needsCompletion = !/\.\d{2}$/.test(value)
      this.number = number;

      // 如果需要补全,则提示用户
      if (needsCompletion) {
        this.$message.info({
          message: '数字已自动补全为两位小数。',
          duration: 400
        });
      }
    }
  }
}
</script>

<style scoped>
/* Add your styles here if needed */
</style>

推荐和参考文章:Vue input 限制输入正负数,小数点后保留两位_vue中input输入金额小数点后两位之后就不能输入了-CSDN博客文章浏览阅读3.1k次,点赞2次,收藏4次。Vue input 限制输入正负数,小数点后保留两位_vue中input输入金额小数点后两位之后就不能输入了https://blog.csdn.net/weixin_44021888/article/details/127065250

(2) 图片垂直居中显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Center Image</title>
<style>
.div-container {
  position: relative;
  width: 80px;
  height: 67px;
  background-color: lightgray;
}

.image-holder {
  position: absolute;
  top: 11px;
  left: 0;
  width: 80px;
  height: 45px;
  display: flex;
  justify-content: center;
}

.image-holder img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
</style>
</head>
<body>
<div class="div-container">
  <div class="image-holder">
    <img src="E:\hehedaWork\test\girl.jpg" alt="Your Image" />
  </div>
</div>
</body>
</html>

error: Your local changes to the following files would be overwritten by merge:(有未提交的文件 git pull冲突解)

 如果你本地有修改,然后也不好提交,又需要pull远程的代码到本地,你可以在本地先执行一下: 

  1. git stash, 
  2. 然后git pull ,
  3. 再然后git stash pop就可以了
  4. 然后你就在tortoiseGit上commit,再push

推荐和参考文章:error:Your local changes to the following files would be overwritten by merge:_error: your local changes to the following files w-CSDN博客文章浏览阅读2.1k次。error:Your local changes to the following files would be overwritten by merge:1. 用git pull来更新代码的时候,遇到了以下报错信息:error:Your local changes to the following files would be overwritten by merge: xxx/xxx/xxx.vue Please, commit your changes or stash them before y_error: your local changes to the following files would be overwritten by merhttps://blog.csdn.net/StoneVivi/article/details/114809766

error: Your local changes to the following files would be overwritten by merge:(有未提交的文件 git pull冲突解)-CSDN博客文章浏览阅读5.7k次,点赞5次,收藏7次。这个错误通常发生在你尝试将远程分支合并到本地分支时,但你的本地分支上存在未提交的更改。Git会阻止合并操作,以防止你的未提交更改被覆盖。_error: your local changes to the following files would be overwritten by merhttps://blog.csdn.net/weixin_43637980/article/details/132468627 

情况一:合并主干的时候出现冲突,解决冲突:

git fetch
git rebase origin/master
git rebase --continue
git push --force

情况二:当本地的已经乱了,但是远端的master已经合并了你最后一次的代码,此时你可以先把你本地修改的文件先拷贝一份出来,然后让远端的master的代码强行覆盖掉当前的目录内容。弄好之后再把文件拷贝进去

在当前分支git fetch

然后 git checkout master (旧的)

可以查看一下日志 git log

拉取最新的 git pull

可以查看一下日志 git log (新的)

git reset --hard orgin/master

可以查看一下日志 git log

最后 把更新过的且当做备份的文件拷贝替换一下,如果有冲突,就文本对比一下,解决一下就好了

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

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

相关文章

军事地图管理系统|DW-S403实现军用地图科学管理

军用地图管理系统DW-S403系统通过数据采集、物联网技术&#xff0c;实现数字化智能管控&#xff0c;以提高军用物资的地图的科学化管理&#xff0c;也有助于消除生产过程中的不确定性。 军用地图是反映实际地形的最可靠的资料&#xff0c;是指挥员的"左膀右臂"。在作…

[Algorithm][动态规划][二维费用的背包问题][一和零][盈利计划]详细讲解

目录 0.原理讲解1.一和零1.题目链接2.算法原理详解3.代码实现 2.盈利计划1.题目链接2.算法原理详解3.代码实现 0.原理讲解 本质仍然是背包问题&#xff0c;但是相较于普通的背包问题&#xff0c;只是限制条件多了一个而已 1.一和零 1.题目链接 一和零 2.算法原理详解 思路&…

03-3.5.1~4 特殊矩阵的压缩存储

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…

vue elementui 自定义loading显示的icon 文本 背景颜色

<div v-loading"modalLoading"element-loading-text"拼命加载中"element-loading-spinner"el-icon-loading"element-loading-background"rgba(0, 0, 0, 0.8)" class"loading-box" v-if"modalLoading"></…

由于人工智能,他们的语言更容易理解

密歇根大学、墨西哥国家天体物理研究所和光学与电子研究所的研究人员正在使用人工智能模型来破译狗的语言。 在国际会议上提出的新研究展示了先进的人工智能 模型如何帮助人类了解动物。 密歇根大学人工智能实验室主任 Rada Mihalcea 强调了这项研究的重要性&#xff1a;对于…

初出茅庐的小李博客之CJSON库解析心知天气数据

心知天气数据JSON格式介绍 JSON格式介绍http://t.csdnimg.cn/pJX1n 下面代码是利用CJSON库进行数据解析 解析代码 #include <stdio.h> #include <string.h> #include "cJSON.h" // 假设你的CJSON库头文件路径是正确的int main(void) {// 提供的JSON…

微软如何打造数字零售力航母系列科普13 - Prime Focus Technologies在NAB 2024上推出CLEAR®对话人工智能联合试点

Prime Focus Technologies在NAB 2024上推出CLEAR对话人工智能联合试点 彻底改变您与内容的互动方式&#xff0c;从内容的创建到分发 洛杉矶&#xff0c;2024年4月9日/PRNewswire/-媒体和娱乐&#xff08;M&E&#xff09;行业人工智能技术解决方案的先驱Prime Focus Techn…

23种设计模式之代理模式

代理模式 1、概念 代理模式&#xff1a;给某一个对象提供一个代理或占位符&#xff0c;并由代理对象来控制对原对象的访问 代理模式是常用的结构型设计模式之一&#xff0c;在Java RMI、Web Service、Spring AOP等技术和框架中都使用了代理模式 2、代理模式结构 Subject&a…

[工具探索]英寸vs毫米下常见尺寸排版

文章目录 常见尺寸1. 照片尺寸2. 纸张尺寸3. 显示器和电视屏幕尺寸4. 手机屏幕尺寸5. 笔记本电脑屏幕尺寸6. 其他设备尺寸 换算公式换算方法常见照片尺寸对比表国际标准ISO&#xff08;216&#xff09;纸张尺寸 什么是英寸&#xff1f; 英寸&#xff08;英语&#xff1a;inch&a…

R语言统计分析——图形参数

参考资料&#xff1a;R语言实战【第2版】 我们可以通过修改图形参数来自定义一幅图形的多个特征&#xff08;字体、颜色、坐标轴、标签&#xff09;。一种方法是通过函数par()来指定这些参数&#xff0c;以这种方式设定的参数除非被再次修改&#xff0c;否则将会在会话结束前一…

webshell三巨头 综合分析(蚁剑,冰蝎,哥斯拉)

考点: 蚁剑,冰蝎,哥斯拉流量解密 存在3个shell 过滤器 http.request.full_uri contains "shell1.php" or http.response_for.uri contains "shell1.php" POST请求存在明文传输 ant 一般蚁剑执行命令 用垃圾字符在最开头填充 去掉垃圾字符直到可以正常bas…

网页五子棋对战项目测试(selenium+Junit5)

目录 网页五子棋对战项目介绍 网页五子棋对战测试的思维导图​ 网页五子棋对战的UI自动化测试 测试一&#xff1a;测试注册界面 测试二&#xff1a;测试登陆界面 测试三&#xff1a;测试游戏大厅界面 测试四&#xff1a;测试游戏房间界面以及观战房间界面 测试五&#…

对yoloV8进行标签过滤来实现行人检测

前言 上一章我们介绍的通过迁移学习&#xff0c;在新的行人数据集上使用已经学习到的特征和权重&#xff0c;从而更快地实现行人检测任务。模型就会调整其参数以适应新的数据集&#xff0c;以提高对行人的识别性能。接下来介绍一种更快更便捷的方法&#xff0c;依旧是基于yolo…

探寻性能优化:如何衡量?如何决策?

目录 一、衡量指标说明 &#xff08;一&#xff09;响应时间&#xff08;Response Time&#xff09; 平均响应时间&#xff08;Average Response Time&#xff09; 百分位数响应时间&#xff08;Percentile Response Time&#xff09; &#xff08;二&#xff09;吞吐量&a…

bugku--web---baby lfi

1、题目描述 2、页面提示使用language参数 3、构造url:/?languagefr。页面有回显 4、这里提示包含关键的文件 5、构造url:/?language/etc/passwd 6、flag shellmates{10CA1_F11e_1Nc1US10n_m4y_r3ve4l_in7Er3st1nG_iNf0Rm4t1on}

2024.6.11

思维导图 代码 #include <iostream>using namespace std;//封装一个 讲解员 类 class Animal { public:Animal(){}virtual void perform(){cout << " " << endl;} };//封装一个 狮子 类 class Lion:public Animal { public:Lion(){}void pe…

BT音频方案

一、缩写 缩写 全程 释义 I2S I2S 音频传输接口总线 PCM Pulse-Code Modulation 基础音频数据或翻译为音频接口总线 HFP Handsfree 蓝牙通话协议 A2DP Advanced Audio Distribution Profile 蓝牙媒体音频协议 二、音频流转策略 蓝牙音频功能分为通话声音和媒体…

【Java】 如何设计RPC框架在10万QPS下实现毫秒级的服务调用?

一、问题解析 来思考这样一个场景&#xff1a;你的垂直电商系统的 QPS 已经达到了每秒 2 万次&#xff0c;在做了服务化拆分之后&#xff0c;由于我们把业务逻辑都拆分到了单独部署的服务中&#xff0c;那么假设你在完成一次完整的请求时需要调用 4&#xff5e;5 次服务&#…

温泉镇旅游微信小程序的设计与实现(论文+源码)_kaic

摘要 旅游业随着经济的快速发展呈现出一派欣欣向荣的景象&#xff0c;尤其是近两年来&#xff0c;各个行业运用科技以及因特网来促进旅游迅速发展&#xff0c;逐渐都显示出了的问题&#xff0c;特别突出的是在线上推广&#xff0c;其缺点也是特别明显。尽管在新冠肺炎的冲击下&…

5252DE 5G 外场通信测试仪

5252DE 5G 外场通信测试仪 集先进算法和高性能硬件于一体的便携式测试仪表 产品综述 5252DE 5G 外场通信测试仪是集合高性能频谱处理模块、多制式解析算法软件于一体的手持式测试仪表&#xff0c;具有很好的便携性、兼容性与可拓展性。 5252DE 具有工作频段宽、性能指标高…