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

第063个

专栏目标

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

本文章目录

应用场景

vue项目中，如何做将整数转化为罗马数字呢，下面的示例就是这样的一个小工具，具体的看源代码。
罗马数字是基于以下符号的组合：

I: 1
V: 5
X: 10
L: 50
C: 100
D: 500
M: 1000
在罗马数字中，通常较大的符号位于左侧，当较小的符号出现在较大符号的左侧时，表示减法；而当它们位于右侧时，则表示加法。例如，IV 表示4（5 - 1），而VI 表示6（5 + 1）。

示例效果

示例源代码（共107行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [e-mail]
* @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>