Vue.js简单计算器实现

m0_69363507

已于 2023-04-02 22:25:16 修改

阅读量61

点赞数

文章标签： vue.js javascript 前端

于 2023-04-02 22:21:03 首次发布

本文链接：https://blog.csdn.net/m0_69363507/article/details/129917976

版权

本文介绍了如何使用Vue.js实现一个简单的计算器。通过定义methods方法，结合switch语句处理不同运算符的计算，再利用watcher监听计算属性的变化，以及computed方法根据选择的运算符即时计算结果，最终将结果显示在result数据属性上。

摘要由CSDN通过智能技术生成

Vue.js简单计算器实现- 项目

项目 methods 方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<input type="number" placeholder="请输入数字" v-model.number="number1" />//v-model.number修饰符，将输入的值强制转换为数字类型。
			<select v-model="pwd">
				<option>请输入运算符</option>
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="number" placeholder="请输入数字" v-model.number="number2" />
			<button @click="li()">等于</button>
			<input type="text" v-model="result" placeholder="结果"/>

最低0.47元/天解锁文章

m0_69363507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js简单计算器实现

Vue.js简单计算器实现- 项目项目 methods 方法<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript"></script> </head> <body> <div
复制链接

扫一扫