vue加减乘除的简单运算

最新推荐文章于 2024-07-19 10:40:17 发布

m0_65378097

最新推荐文章于 2024-07-19 10:40:17 发布

阅读量123

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_65378097/article/details/129912386

版权

一.往期一样，先看效果：

编辑

工具：HBuilder X

js插件：Vue.js

二.详细实现步骤：

1.引入vue框架

<script src="js/vue.js"></script>

2.建立元素区

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

<body>
    <div id="app">
    
    </div>
</body>

3.使用srcipt标签来定义一个vue方法并绑定id为app的容器，并在data里用v-model进行双向绑定

<script type="text/javascript">
    var vm=new Vue({
        el:"#app", 

        data:{       
            
        }
    });

</script>

4.在此基础上开始编写加减乘除运算

这里使用 methods方法 computed方法 watch(侦听器)方法做出3种不同的加减乘除运算

<script>
	        const vm = new Vue({
	            el: "#app",
	            data: {
	                num1:0,
	                num2:0,
	                sign:"+",
	                num3:0,
	                num4:0,
	                sign1:"+",
	                res1:"",
	                num5:0,
	                num6:0,
	                sign2:"+",
	                res2:""
	            },
	            methods:{
	                change(){
	                    if(this.sign2 === "+") {
	                        this.res2 = this.num5 + this.num6;
	                    } else if(this.sign2 === "-") {
	                        this.res2 = this.num5 - this.num6;
	                    } else if(this.sign2 === "*") {
	                        this.res2 = this.num5 * this.num6;
	                    } else if(this.sign2 === "/"){
	                        this.res2 = this.num5 / this.num6;
	                    }
	                }
	            },
	            computed:{
	                res(){
	                    if(this.sign === "+") {
	                        return this.num1 + this.num2;
	                    } else if(this.sign === "-") {
	                        return this.num1 - this.num2;
	                    } else if(this.sign === "*") {
	                        return this.num1 * this.num2;
	                    } else if(this.sign === "/"){
	                        return this.num1 / this.num2;
	                    }
	                }
	            },
	            watch:{
	                num3(val){
	                    if(this.sign1 === "+") {
	                        this.res1 = val + this.num4;
	                    } else if(this.sign1 === "-") {
	                        this.res1 = val - this.num4;
	                    } else if(this.sign1 === "*") {
	                        this.res1 = val * this.num4;
	                    } else if(this.sign1 === "/"){
	                        this.res1 = val / this.num4;
	                    }
	                },
	                num4(val){
	                    if(this.sign1 === "+") {
	                        this.res1 = this.num3 + val;
	                    } else if(this.sign1 === "-") {
	                        this.res1 = this.num3 - val;
	                    } else if(this.sign1 === "*") {
	                        this.res1 = this.num3 * val;
	                    } else if(this.sign1 === "/"){
	                        this.res1 = this.num3 / val;
	                    }
	                },
	                sign1(val){
	                    if(val === "+") {
	                        this.res1 = this.num3 + this.num4;
	                    } else if(val === "-") {
	                        this.res1 = this.num3 - this.num4;
	                    } else if(val === "*") {
	                        this.res1 = this.num3 * this.num4;
	                    } else if(val === "/"){
	                        this.res1 = this.num3 / this.num4;
	                    }
	                }
	            }
	        })
</script>

5.源码

链接：https://pan.baidu.com/s/11RmUujfa-gCWa8eI97wa2A
提取码：1111