使用 Vue 方法，计算属性，监听器完成简易计算器

一、效果图

二、思路

方法：

• 定义一个方法，可以计算结果
• 给input添加@input事件

计算属性：

• 定义一个方法，可以计算结果
• 定义计算属性
• 在计算属性的get方法中调用方法

监听器：

• 定义一个方法，可以计算结果
• 监听属性变化
• 在属性变化时调用方法计算结果

三、实现过程

1.通过vue脚手架创建项目

vue create Dome

2.删除自带的模板

3.创建组件

• 创建CalcOne.vue

  <template>
  	<div class="box">
  		<div class="title">方法</div>
  		<!-- 
  			第一个数
  			v-model绑定属性，number将值转换为整数
  			@input 输入框输入事件
  		-->
  		<input type="text" v-model.number="num1" @input="inp"/>
          <!-- 遍历选项 -->
  		<select v-model="opt" @change="inp">
  			<option v-for="o in opts" :key="o">{{ o }}</option>
  		</select>
          <!-- 第二个数 -->
  		<input type="text" v-model.number="num2" @input="inp"/>
  		=
          <!-- 结果 -->
  		<span class="result">{{ result }}</span>
  
  		<hr />
  	</div>
  </template>
  
  <script>
  
  export default {
  	name: 'CalcOne',
  	data(){
  		return{
  			opts:['+','-','*','/'], // 运算符
  			num1:'', // 第一个数
  			num2:'', // 第二个数
  			opt:'+', // 运算符
  			result:'' // 结果
  		}
  	},
  	methods:{
  		inp(){
              // 如果两个数为空，则不进行计算
  			if(this.num1 === '' || this.num2 === '') return;
              // 根据选择的运算符进行相关运算
  			switch (this.opt){
  				case '+':
  					this.result = this.num1 + this.num2;
  					break;
  				case '-':
  					this.result = this.num1 - this.num2;
  					break;
  				case '*':
  					this.result = this.num1 * this.num2;
  					break;
  				case '/':
                      // 0 不能被除
  					if(this.num2 === 0){
  						alert('被除数不可为0');
  						this.num2 = 1;
  						return;
  					}
  					this.result = this.num1 / this.num2;
  					break;
  			}
  		}
  	}
  };
  </script>
  

• 创建CalcTwo.vue

  <template>
  	<div class="box">
  		<div class="title">计算属性</div>
          <!-- 调用计算属性 -->
  		<input type="text" v-model.number="num1s"/>
          <!-- 调用计算属性 -->
  		<select v-model="optFun">
  			<option v-for="o in opts" :key="o">{{ o }}</option>
  		</select>
          <!-- 调用计算属性 -->
  		<input type="text" v-model.number="num2s"/>
  		=
  		<span class="result">{{ result }}</span>
  		<hr/>
  	</div>
  </template>
  <script>
  export default {
  	name: 'CalcTwo',
  	data() {
  		return {
  			opts: ['+', '-', '*', '/'],
  			num1: '',
  			num2: '',
  			opt: '+',
  			result: ''
  		}
  	},
  	methods: {
          // 此方法可以进行结果的运算
  		inp() {
  			if (this.num1 === '' || this.num2 === '') return;
  			switch (this.opt) {
  				case '+':
  					this.result = this.num1 + this.num2;
  					break;
  				case '-':
  					this.result = this.num1 - this.num2;
  					break;
  				case '*':
  					this.result = this.num1 * this.num2;
  					break;
  				case '/':
  					if (this.num2 === 0) {
  						alert('被除数不可为0');
  						this.num2 = 1;
  						return;
  					}
  					this.result = this.num1 / this.num2;
  					break;
  			}
  		}
  	},
      // 计算属性
  	computed: {
         	// 第一个数
  		num1s: {
  			get() {
                  // 调用方法获取结果
  				this.inp();
  				return this.num1;
  			},
  			set(val) {
  				this.num1 = val;
  			}
  		},
          // 第二个数
  		num2s: {
  			get() {
  				this.inp();
  				return this.num2;
  			},
  			set(val) {
  				this.num2 = val;
  			}
  		},
          // 运算符
  		optFun: {
  			get() {
  				this.inp();
  				return this.opt;
  			},
  			set(val) {
  				this.opt = val;
  			}
  		}
  	}
  };
  </script>
  

• 创建CalcThree.vue

  <template>
  	<div class="box">
  		<div class="title">监听器</div>
  		<input type="text" v-model.number="num1"/>
  		<select v-model="opt">
  			<option v-for="o in opts" :key="o">{{ o }}</option>
  		</select>
  		<input type="text" v-model.number="num2"/>
  		=
  		<span class="result">{{ result }}</span>
  		<hr />
  	</div>
  </template>
  <script>
  export default {
  	name: 'CalcThree',
  	data(){
  		return{
  			opts:['+','-','*','/'],
  			num1:'',
  			num2:'',
  			opt:'+',
  			result:''
  		}
  	},
  	methods:{
          // 此方法可以进行结果的运算
  		inp(){
  			if(this.num1 === '' || this.num2 === '') return;
  			switch (this.opt){
  				case '+':
  					this.result = this.num1 + this.num2;
  					break;
  				case '-':
  					this.result = this.num1 - this.num2;
  					break;
  				case '*':
  					this.result = this.num1 * this.num2;
  					break;
  				case '/':
  					if(this.num2 === 0){
  						alert('被除数不可为0');
  						this.num2 = 1;
  						return;
  					}
  					this.result = this.num1 / this.num2;
  					break;
  			}
  		}
  	},
      // 监听器
  	watch:{
          // 监听第一个数的变化
  		num1(){
              // 属性变化就调用方法
  			this.inp();
  		},
          // 监听第二个数的变化
  		num2(){
  			this.inp();
  		},
          // 监听运算符的变化
  		opt(){
  			this.inp();
  		}
  	}
  };
  </script>
  

4.导入组件

在App.vue中引用组件

<template>
	<div id="app">
		<CalcOne />
		<CalcTwo />
		<CalcThree />
	</div>
</template>

<script>
import CalcOne from './components/CalcOne.vue';
import CalcTwo from './components/CalcTwo.vue';
import CalcThree from './components/CalcThree.vue';
export default {
    components: {CalcOne,CalcTwo,CalcThree},
	name: "App",
};
</script>

5.运行程序

---

代码地址：使用Vue的方法，计算属性，监听器制作简易计算器 · 紫豪啊/Vue实例集合 - 码云 - 开源中国 (gitee.com)