063:vue工具 --- 整数转化为罗马数字


第063个

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。

提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,updated, beforeDestroy,destroyed,activated,deactivated,errorCaptured,components,)、 root , parent , children , slots , refs , props, emit , eventbus ,provide / inject, Vue.observable, listeners, attrs, $nextTick , v-for, v-if, v-else,v-else-if,v-on,v-pre,v-cloak,v-once,v-model, v-html, v-text, keep-alive,slot-scope, filters, v-bind,.stop, .native, directives,mixin,render,国际化,Vue Router等

本文章目录

应用场景

vue项目中,如何做将整数转化为罗马数字呢,下面的示例就是这样的一个小工具,具体的看源代码。

罗马数字是基于以下符号的组合:

I: 1

V: 5

X: 10

L: 50

C: 100

D: 500

M: 1000

在罗马数字中,通常较大的符号位于左侧,当较小的符号出现在较大符号的左侧时,表示减法;而当它们位于右侧时,则表示加法。例如,IV 表示4(5 - 1),而VI 表示6(5 + 1)。

示例效果

示例源代码(共107行)

javascript 复制代码
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2025-01-07
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue工具:将整数转化为罗马数字(1-9999) </h3>
			<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
		</div>
		<div class="dajianshi">
			<el-input type="textarea" :rows="10" v-model="num" style="font-size: 18px;"></el-input>
		</div>
		<h4>
			<el-button type="success" size="small" @click="convertToRoman()">转换为罗马数字</el-button>
		</h4>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			  num: 999, // 用户输入的整数
			  errorMessage: '' // 错误信息
			}
		},
		mounted() {

		},
		methods: {
			intToRoman(num) {
				const values = [
					[1000, 'M'],
					[900, 'CM'],
					[500, 'D'],
					[400, 'CD'],
					[100, 'C'],
					[90, 'XC'],
					[50, 'L'],
					[40, 'XL'],
					[10, 'X'],
					[9, 'IX'],
					[5, 'V'],
					[4, 'IV'],
					[1, 'I']
				];

				let roman = '';
				for (let [value, symbol] of values) {
					while (num >= value) {
						roman += symbol;
						num -= value;
					}
				}

				return roman;
			},
			convertToRoman() {
                  let x=Number.isInteger(this.num)
				  console.log(x)
				if (!x|| this.num <= 0 || this.num > 9999) {
					this.$message({
						type: "error",
						message: '请输入1到9999之间的整数'
					})
				}

				try {
					this.num = this.intToRoman(this.num);
				} catch (error) {
					this.$message({
						type: "error",
						message: '转换过程中出现错误!'
					})
				}
			}
		}

	}
</script>
<style scoped>
	.djs-box {
		width: 900px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid seagreen;
	}

	.topBox {
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: #666;
		color: #fff;
	}

	.dajianshi {
		width: 90%;
		height: 300px;
		margin: 50px auto 0;
	}
</style>
相关推荐
还是大剑师兰特5 小时前
PostGIS面试题及详细答案120道之 (041-050 )
大剑师·postgis面试题
还是大剑师兰特1 天前
MySQL面试题及详细答案 155道(001-020)
大剑师·mysql面试题
还是大剑师兰特2 天前
Java面试题及详细答案120道之(081-100)
java面试题·大剑师
还是大剑师兰特7 天前
Vue3 面试题及详细答案120道(31-45 )
大剑师·vue面试题
还是大剑师兰特11 天前
CSS面试题及详细答案140道之(61-80)
css·大剑师·css面试题
还是大剑师兰特12 天前
CSS面试题及详细答案140道之(41-60)
前端·css·大剑师·css面试·css示例
还是大剑师兰特18 天前
Shader面试题100道之(81-100)
大剑师·shader面试题·shader教程
还是大剑师兰特21 天前
Shader面试题100道之(21-40)
大剑师·shader面试题·shader教程
还是大剑师兰特3 个月前
手写深拷贝函数
javascript·深拷贝·大剑师
还是大剑师兰特4 个月前
大屏技术汇集【目录】
大剑师·数字大屏