Vue利用普通方法或计算属性或侦听属性实现简易计算器

神奇的熊熊哎

已于 2023-04-02 21:10:54 修改

阅读量134

点赞数

文章标签：编辑器 vue.js 前端前端框架

于 2023-04-02 20:53:12 首次发布

本文链接：https://blog.csdn.net/weixin_71219164/article/details/129916210

版权

vue实现简单计算机（三种方式）

1.使用普通方法

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/vue.js" type="text/javascript"></script>
 </head>
 <body>
  <div id="app">
   <input type="number" placeholder="请输入数字" v-model.number="number1" />
   <select v-model="pwd">
    <option>请选择符号</option>
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
   </select>
   <input type="number" placeholder="请输入数字" v-model.number="number2" />
   <button @click="pd()">等于</button>
   <input type="text" v-model="result" placeholder="结果"/>
   <br />
   
  </div>
 </body>
 <script>
  new Vue({
   el:"#app",
   data:{
    number1:'',
    number2:'',
    pwd:'请选择符号',
    result:''
   },
   methods:{
    pd(){
     switch(this.pwd){
      case '+':
       this.result = this.number1+this.number2;
       break;
      case '-':
       this.result = this.number1-this.number2;
       break;
      case '*':
       this.result = this.number1*this.number2;
       break;
      case '/':
       this.result = this.number1/this.number2;
       break;
     }
    }
   }
  });
 </script>
</html>

二、通过computed计算属性
将计算结果设定为一个computed计算属性，使用eval和模板字符串计算表达式的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input id="input" type="number" v-model="num1" placeholder="请输入数字" />
			 <select v-model="selected">
				<option value ="">请选择</option>
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
				<option value ="%">%</option>
			 </select>
			<input type="number" v-model="num2" placeholder="请输入数字"/>
			<input type="text" v-model="result" onfocus="this.blur()" placeholder="请输入完整的表达式"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					num1:0,//第一输入框中的数字
					num2:0,//第二输入框中的数字
					selected:''//默认选择的运算符 可以设置为 '','+','-','*','/','%'
				},
				computed:{
					result:function(){
						if(this.selected === '' || this.num1=='' || this.num2 =='') //表达式不完整时跳过运算
							return null
						return eval(`${this.num1}${this.selected}(${this.num2})`)
					}
				}
			})
		</script>
	</body>
</html>

三、使用watch侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
每当侦听的属性发生改变时，vue会执行该属性对应的函数。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>watch实现</title>
  <script src="js/vue.js" type="text/javascript"></script>
 </head>
 <body>
  <div id="app">
   <input type="text" placeholder="请输入数字" v-model.number="number1" />
   <select v-model="pwd">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
   </select>
   <input type="text" placeholder="请输入数字" v-model.number="number2" />
   <button @click="pd()">等于</button>
   <input type="text" v-model="result"/>
   <br />
   
  </div>
 </body>
 <script>
  var vm = new Vue({
   el:"#app",
   data:{
    number1:0,
    number2:0,
    pwd:"+",
    result:0
   },
   computed:{
    add(){
     var num1 = this.number1
     var num2 = this.number2
     var num3 = this.pwd
     return{
      num1,
      num2,
      num3
     }
    }
   },
   watch:{
    add(val){
     switch(this.pwd){
      case '+':
       this.result = this.number1+this.number2;
       break;
      case '-':
       this.result = this.number1-this.number2;
       break;
      case '*':
       this.result = this.number1*this.number2;
       break;
      case '/':
       this.result = this.number1/this.number2;
       break;
     }
    },
    
   }
  });
   
 </script>
</html>

神奇的熊熊哎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue利用普通方法或计算属性或侦听属性实现简易计算器

将计算结果设定为一个computed计算属性，使用eval和模板字符串计算表达式的值。Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。//默认选择的运算符可以设置为 '','+','-','*','/','%'每当侦听的属性发生改变时，vue会执行该属性对应的函数。//表达式不完整时跳过运算。三、使用watch侦听属性。//第一输入框中的数字。//第二输入框中的数字。
复制链接

扫一扫