Vue中用方法、表达式、计算属性、监听器实现简单的计算功能

最新推荐文章于 2024-02-22 11:50:32 发布

梦想大佬程序员

最新推荐文章于 2024-02-22 11:50:32 发布

阅读量194

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_73944717/article/details/129909348

版权

1.创建一个html项目并建立四个HTML文件，引入js文件

2.用方法实现计算效果

下面代码首先在script对对象实例化，并且对运算符绑定，在div中建立button点击事件，placeholder用来显示input输入框中的绑定的内容文字，在method方法中用switch进行一个判断，改变值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="my">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<button @click="change">计算</button>
			<br />
			结果:{{result}}<br />
 
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#my",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:"+"
			},
			methods:{
				change(){
					switch(this.opt){
						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>

运行效果如图

3.用表达式实现计算效果

同上实例化后使用input标签创建输入框绑定计算结果，由于输入的为数字类型，用v-model.numberl绑定，在div中显现方法即可，代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="my">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select>
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
            <!--placeholder作用为当文本框中无内容时的提示字段  -->
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<br />
			结果:<br />
			+:{{number1+number2}}<br />
			-:{{number1-number2}}<br />
			*:{{number1*number2}}<br />
			/:{{number1/number2}}<br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#my",
			data:{
				number1:"",
				number2:""
			}
		});
	</script>
</html>

运行结果如下

4.用计算属性实现计算效果

借鉴methods方法，只不过这里用的是computed，使用switch进行了一个判断，最后使用return返回值属性，如下

<<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="my">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<button @click="change">计算</button>
			<br />
			结果:{{result}}<br />
 
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#my",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:"+"
			},
			computed:{
				change(){
					switch(this.opt){
						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;
					}
					return this.result;
				}
			}
		});
	</script>
</html>

运行效果如下

4.使用监听器实现计算效果

在监听器中对输入框中的数进行监听，当输入值改变时返回执行switch语句，如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="my">
			<input type="text" placeholder="请输入第一个数" v-model.number="number1"/>
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" placeholder="请输入第二个数" v-model.number="number2"/>
			<br />
			结果:{{result}}<br />
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:"#my",
			data:{
				number1:"",
				number2:"",
				result:"",
				opt:""
			},
			watch:{
				number1:function(num1){
					switch(this.opt){
					case"+":
					this.result=num1+this.number2;
					break;
					case"-":
					this.result=num1-this.number2;
					break;
					case"*":
					this.result=num1*this.number2;
					break;
					case"/":
					this.result=num1/this.number2;
					break;
					}
				},
				number2:function(num2){
					switch(this.opt){
						case"+":
						this.result=this.number1+num2;
						break;
						case"-":
						this.result=this.number1-num2;
						break;
						case"*":
						this.result=this.number1*num2;
						break;
						case"/":
						this.result=this.number1/num2;
						break;
					}
				},
				opt:function(){
					switch(this.opt){
					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>

运行如下

本章主要是在vue中通过以上四种方式实现计算效果，感谢观看

梦想大佬程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中用方法、表达式、计算属性、监听器实现简单的计算功能

下面代码首先在script对对象实例化，并且对运算符绑定，在div中建立button点击事件，placeholder用来显示input输入框中的绑定的内容文字，在method方法中用switch进行一个判断，改变值。同上实例化后使用input标签创建输入框绑定计算结果，由于输入的为数字类型，用v-model.numberl绑定，在div中显现方法即可，代码如下。借鉴methods方法，只不过这里用的是computed，使用switch进行了一个判断，最后使用return返回值属性，如下。
复制链接

扫一扫