vue实现简易计算器，vue基础

最新推荐文章于 2024-07-16 19:54:42 发布

spy过家家

最新推荐文章于 2024-07-16 19:54:42 发布

阅读量2.9k

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zm8454/article/details/126004894

版权

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue (1).js"></script>
	</head>
	<body>
		<form id="app">
			<input type="text" v-model.number="sum_1" @change="change()">
			<select v-model="symbol" @change="change()">
				<option v-for="(item,key) in list">{{item}}</option>
			</select>
			<input type="text" v-model.number="sum_2" @change="change()">
			=
			<input type="text" v-model="sum">
		</form>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					list: ['请选择', '+', '-', '×', '÷'],
					sum: '',
					sum_1: '',
					sum_2: '',
					symbol: '请选择'
				},

				methods: {
					// 计算函数
					change() {
						if (this.symbol == '+') {
							this.sum = this.sum_1 + this.sum_2
						} else if (this.symbol == '-') {
							this.sum = this.sum_1 - this.sum_2
						} else if (this.symbol == '×') {
							this.sum = this.sum_1 * this.sum_2
						} else if (this.symbol == '÷') {
							this.sum = this.sum_1 / this.sum_2
						}
					}
				}
			})
		</script>
	</body>
</html>

这样使用vue就可以实现简单的计算器啦，赶快试试吧！

觉得好玩，喜欢的可以点个赞哦。谢谢大家