如何用vue做计算器功能

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

大家都知道vue是数据驱动视图的一个javascript框架，彻底解放dom操作，今天我们用vue做一个计算器的功能，会发现vue对于数据操作是非常好用的，下面是小案例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="number" v-model.number="num1"/>
			<select v-model.number="operater">
				<option value="0">+</option>
				<option value="1">-</option>
				<option value="2">*</option>
				<option value="3">/</option>
			</select>
			<input type="number" v-model.number="num2"/>
			<button @click="cal">=</button>
			<input type="number" v-model.number="res"/>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data(){
					return{
						num1:0,
						num2:0,
						operater:0,
						res:0
					}
				},
				methods:{
					cal(){
							switch(this.operater){
								case 0:
								this.res=this.num1+this.num2;
								break;
								case 1:
								this.res=this.num1-this.num2;
								break;
								case 2:
								this.res=this.num1*this.num2;
								break;
								case 3:
								this.res=this.num1/this.num2;
								break;
							}
					}
				}
			})
		</script>
	</body>
</html>

以上是 如何用vue做计算器功能 的全部内容， 来源链接： utcz.com/z/376090.html

回到顶部