用计算属性和监听器制作计算器

蓓蕾

已于 2023-04-02 23:08:25 修改

阅读量84

点赞数

文章标签： html

于 2023-04-02 23:03:00 首次发布

本文链接：https://blog.csdn.net/m0_63663145/article/details/129919000

版权

1.先在JS下创建好html，同时把vue.js拉入JS下，写好整体框架，链入vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="computer">
			
			
		</div>
	</body>
	<script>
            var vm = new Vue({
                el:"#computer",
                data(){
                	return{
                	}
                }
               })
    </script>
</html>

2.写好简易布局，并用select来存放计算符号，并用v-model来绑定

<body>
		<div id="computer">
			<select v-model="opt">
                <option >+</option>
                <option >-</option>
                <option >*</option>
                <option >/</option>
            </select>
			
		</div>
	</body>

3.插入input，使数字转化为整型

<div id="computer">
            <input type="text" placeholder="请输入第一个数" v-model.number="num1">
            <select v-model="opt">
                <option >+</option>
                <option >-</option>
                <option >*</option>
                <option >/</option>
            </select>
            <input type="text" placeholder="请输入第二个数" v-model.number="num2">
            <h3>结果:{{num1}}+{{num2}}={{result}}</h3>
        </div>
<script>
            var vm = new Vue({
                el:"#computer",
                data(){
                    return{
                        num1:0,
                        num2:0,
                        result:0,
                        opt:"+"
                    }
                })
        </script>

4.加入按钮并实现点击事件，使其有一个简单地计算

 <body>
        <div id="computer">
            <input type="text" placeholder="请输入第一个数" v-model.number="num1">
            <select v-model="opt">
                <option >+</option>
                <option >-</option>
                <option >*</option>
                <option >/</option>
            </select>
            <input type="text" placeholder="请输入第二个数" v-model.number="num2">
            <h3>结果:{{num1}}+{{num2}}={{result}}</h3>
            <button @Click="terms">计算</button>
        </div>

        <script>
            var vm = new Vue({
                el:"#computer",
                data(){
                    return{
                        num1:0,
                        num2:0,
                        result:0,
                        opt:"+"
                    }
                },
                methods:{
                    terms(){
                        if(this.opt == "+"){
                            this.result=this.num1+this.num2;
                        }else if (this.opt == "-") {
                            this.result=this.num1-this.num2;
                        }else if (this.opt == "*") {
                            this.result=this.num1*this.num2;
                        }else{
                            this.result=this.num1/this.num2;
                        }
                        
                    }
                })
        </script>

5.加入watch属性，监听数字和符号的改变，并进行计算

watch:{
                    opt(newValue,oldValue){
                        if(newValue == "+"){
                            this.result=this.num1+this.num2;
                        }else if (newValue == "-") {
                            this.result=this.num1-this.num2;
                        }else if (newValue == "*") {
                            this.result=this.num1*this.num2;
                        }else{
                            this.result=this.num1/this.num2;
                        }
                    },
                    num1(newValue,oldValue){
                        if(this.opt == "+"){
                            this.result=newValue+this.num2;
                        }else if (this.opt == "-") {
                            this.result=newValue-this.num2;
                        }else if (this.opt == "*") {
                            this.result=newValue*this.num2;
                        }else{
                            this.result=newValue/this.num2;
                        }
                    },
                    num2(newValue,oldValue){
                        if(this.opt == "+"){
                            this.result=this.num1+newValue;
                        }else if (this.opt == "-") {
                            this.result=this.num1-newValue;
                        }else if (this.opt == "*") {
                            this.result=this.num1*newValue;
                        }else{
                            this.result=this.num1/newValue;
                        }
                    }
                }

6.利用computed的属性来计算

computed:{
                    terms(){
                        if(this.opt == "+"){
                            this.result=this.num1+this.num2;
                        }else if (this.opt == "-") {
                            this.result=this.num1-this.num2;
                        }else if (this.opt == "*") {
                            this.result=this.num1*this.num2;
                        }else{
                            this.result=this.num1/this.num2;
                        }
                        
                    }
                }

7.最后为了页面更加美观，写入简单地style

<style>
		#computer{
			margin:0 auto;
			height: 500px;
			width: 500px;
			
		}
    </style>

展示最后结果

蓓蕾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用计算属性和监听器制作计算器

1.先在JS下创建好html，同时把vue.js拉入JS下，写好整体框架，链入vue.js。2.写好简易布局，并用select来存放计算符号，并用v-model来绑定。5.加入watch属性，监听数字和符号的改变，并进行计算。7.最后为了页面更加美观，写入简单地style。3.插入input，使数字转化为整型。6.利用computed的属性来计算。4.加入按钮，使其有一个简单地计算。
复制链接

扫一扫