vue.js2行代码实现简易计算机计算纯干货

最新推荐文章于 2022-10-24 16:04:42 发布

想快快长大

最新推荐文章于 2022-10-24 16:04:42 发布

阅读量504

点赞数 1

分类专栏： vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_41812254/article/details/98115782

版权

vue.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>demo6</title>
		<script src="./lib/vue-2.4.0.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="n1" />

			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>

			<input type="text" v-model="n2" />

			<input type="button" value="=" @click="calc" />

			<input type="text" v-model="result" />

		</div>


		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					n1: '0',
					n2: '0',
					result: '0',
					opt: '+'
				},
				methods: {
					calc() { //计算器算数的方法
						// switch (this.opt) {
						// 	case '+':
						// 	this.result = parseInt(this.n1) + parseInt(this.n2)
						// 		break;
						// 	case '-':
						// 	this.result = parseInt(this.n1) - parseInt(this.n2)
						// 		break;
						// 	case '*':
						// 	this.result = parseInt(this.n1) * parseInt(this.n2)
						// 		break;
						// 	case '/':
						// 	this.result = parseInt(this.n1) / parseInt(this.n2)
						// 		break;
						// }
						var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
						this.result = eval(codeStr)
						
					}
					// 
				}
			})
		</script>
	</body>
</html>

直接上代码 calc注释的是第一种方法 2行代码那个是第二种方法不建议经常使用上面引入的vue.js请换成你自己的路径