VUE实现简易计算器

kg105

已于 2023-04-02 14:34:47 修改

阅读量278

点赞数 2

文章标签： vue.js javascript 前端

于 2023-04-02 13:54:48 首次发布

本文链接：https://blog.csdn.net/weixin_64047160/article/details/129909582

版权

运行效果

步骤：1.引入js

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

3.实例化一个对象

1.引入js文件

<head>
	<!--引入vue.js-->
	<script type="text/javascript" src="js/vue.js" ></script>
	<meta charset="UTF-8">
	<title></title>
</head>

2.html部分

<body>
		<!--在body中建立一个被vue控制的元素区，id属性值会被vue所引用-->
		<div id="app">
			<!--使用input文本输入框设定可供输入的数值，placeholder属性提供可描述输入字段预期值的提示信息，并使用v-model设定双向绑定-->
			<input type="text" placeholder="请输入第一个数字" v-model="number1"/>
			<!--使用<select>表单元素，定义下拉列表,设定四个可选的运算符-->
			<select v-model="option">
			<option value="1">+</option>
            <option value="2">-</option>
            <option value="3">*</option>
            <option value="4">/</option>
			</select>
			<!--使用input文本输入框设定可供输入的数值，placeholder属性提供可描述输入字段预期值的提示信息，并使用v-model设定双向绑定-->
			<input type="text"placeholder="请输入第二个数字"v-model="number2" />
			<!--使用input文本输入框设定可供输入的数值，value代表属性值，@click事件绑定，实现点击-->
			<input type="button" value="=" @click="but">
			<!--使用input文本框显示输入结果，并使用v-model设定双向绑定-->
            <input type="text" v-model="results">

		</div>
	</body>

3.创建实例化对象

<script type="text/javascript">
		//创建一个Vue对象
		var vm = new Vue({
			//获取渲染元素区
			el: "#app", //el属性，指定某个标签进行相应的vue操作
			//data中，存放的都是el中要用的数据
			data: {
				number1: "",
				number2: "",
				results: "",
				option: "1" //默认为加号
			},
			//定义方法调用
			methods: {
				//计算器
				but() {
					//这里可以直接使用this调用该方法的对象
					//switch分支语句，当switch(值)的值与 case语句中的值相等时，case标签后面的语句开始执行，遇到break标签时停止执行switch语句。
					switch(this.option) {
						//计算input框内输入的值进行加减乘除
						case "1":
							this.results = parseInt(this.number1) + parseInt(this.number2)
							break;
						case "2":
							this.results = parseInt(this.number1) - parseInt(this.number2)
							break;
						case "3":
							this.results = parseInt(this.number1) * parseInt(this.number2)
							break;
						case "4":
							this.results = parseInt(this.number1) / parseInt(this.number2)
							break;

					}
				}
			}
		});
</script>