用Vue的三种方法实现简单计算机

08zxr

已于 2023-04-03 00:00:34 修改

阅读量204

点赞数

文章标签： vue.js javascript 前端

于 2023-04-02 23:54:36 首次发布

本文链接：https://blog.csdn.net/2301_77410437/article/details/129919769

版权

第一步：引入Vue框架

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

第二步：建立元素区

在body中建立一个被vue控制的元素区，id属性值可被vue引用

<body>
	<div id="app">

     </div>
</body>

第三步：创建一个VM对象

<script type="text/javascript">
    var vm=new Vue({
        el:"#app", 
        data:{       
            
        }
    })
</script>

实例：
在以上三步的基础上开始编写实现计算器代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>methods</title>
		<script src="js/vue.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">
			<button @click="fangfa">计算</button>
			<br/>
			<input type="text" v-model="result">
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					n1: 0,
					n2: 0,
					opt: '+',
					result: 0
				},
				methods: {
					fangfa() {
						switch (this.opt) {
							case '+':
								this.result = Number(this.n1) + Number(this.n2);
								break;
							case '-':
								this.result = Number(this.n1) - Number(this.n2);
								break;
							case '*':
								this.result = Number(this.n1) * Number(this.n2);
								break;
							case '/':
								this.result = Number(this.n1) / Number(this.n2);
								break;
						}
					}
				}
			});
		</script>
	</body>
</html>

运行结果：

加：