如何用vue做计算器功能

大家都知道vue是数据驱动视图的一个javascript框架，彻底解放dom操作，今天我们用vue做一个计算器的功能，会发现vue对于数据操作是非常好用的，下面是小案例。<!DOCTYPE html><html><head><meta charset="utf-8"><title></title>&l...

lixiaoyan_star

3171人浏览 · 2019-04-02 11:47:01

lixiaoyan_star · 2019-04-02 11:47:01 发布

大家都知道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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^