vue 简易计算器多种方式，形式基本相同

最新推荐文章于 2023-02-10 16:07:42 发布

画凉词微

最新推荐文章于 2023-02-10 16:07:42 发布

阅读量287

点赞数

本文链接：https://blog.csdn.net/zhy277/article/details/106909100

版权

共三种但差别不是很大

计算器 1

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
    <center>
        <table border="1">
            <div id="app">

                <input type="text" v-model="num1">
                <select v-model="opt">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
                <input type="text" v-model="num2">
                <input type="button" value="=" v-on:click="js">
                <input type="text" v-model="result">
            </div>
        </table>
    </center>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                num1: "",
                num2: "",
                result: "0",
                opt: '+',
            },
            methods: {
                js(){
                    switch(this.opt){
                        case "+":

                            this.result = parseInt(this.num1) + parseInt(this.num2);
                            break;
                        case "-":
                            this.result = parseInt(this.num1) - parseInt(this.num2);
                            break;
                        case "*":
                            this.result = parseInt(this.num1) * parseInt(this.num2);
                            break;
                        case "/":
                            if (this.num2 == 0 || this.num2 == ""){
                                alert("被除数为零或者为空，请输入正确的被除数");
                            }
                            this.result = parseInt(this.num1) / parseInt(this.num2);
                            break;
                    }
                }
            }
        })
    </script>
</body>
</html>

计算器 2

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <meta charset="UTF-8">
    <title>my-calculator</title>
</head>
<body>
<div id="app">
    <input type="number" v-model.number="num1"/>
    <select v-model.number="operater">
        <option value="0">+</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
    </select>
    <input type="number" v-model.number="num2"/>
    <button @click="cal">=</button>
    <input type="number" v-model.number="res"/>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data(){
            return{
                num1:0,
                num2:0,
                operater:0,
                res:0

            }
        },
        methods:{
            cal(){
                switch(this.operater){
                    case 0:
                        this.res=this.num1+this.num2;
                        break;
                    case 1:
                        this.res=this.num1-this.num2;
                        break;
                    case 2:
                        this.res=this.num1*this.num2;
                        break;
                    case 3:
                        this.res=this.num1/this.num2;
                        break;
                }
            }
        }
    })
</script>
</body>
</html>

计算器 3

<!DOCTYPE html>
<html xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>

<!--显示-->
<!--
v-model 可以进行前后数据的同步。
-->
<h2>采用： v-model</h2>
<div id="app">

    <p>
        单价：<input type="text" v-model:value="price">
    </p>

    <p>
        数量：<input type="text" v-model:value="count">
    </p>

    <p>
        总计：<input type="text" v-model:value="total">
        <button v-on:click="cal()">计算</button>
    </p>

    <hr>

    <p>

    <h2>一个简易计算器！</h2>

    操作数1：<input type="text" v-model:value="op1">
    <select v-model:value="opr">

        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>

    </select>

    操作数2：<input type="text" v-model:value="op2">

    =

    结果：<input type="text" :value="res">
    <button @click="cal2()">计算</button>
    </p>
    <!--  v-bind可以写为  ：  -->
    <!--  v-on可以写为   @   -->

</div>

<!--引入包资源-->
<script src="../lib/vue.js"></script>

<script>
    //声明一个Vue对象
    var vm=new Vue({
        el:"#app",   //绑定前端进行显示的ID
        data:{       //数据
            price:"12",
            count:"1",
            total:"0",

            op1:"1",
            opr:"+",
            op2:"1",
            res:"0"
        },
        methods:{    //方法
            cal(){
                this.total=this.price*this.count;
            },

            cal22(){
                var flag=this.opr;
                switch (flag) {
                    case '+':
                        this.res=parseInt("this.op1")+parseInt("this.op1");
                        break;
                    case '-':
                        this.res=parseInt("this.op1")-parseInt("this.op1");
                        break;
                    case '*':
                        this.res=parseInt("this.op1")*parseInt("this.op1");
                        break;
                    case '/':
                        this.res=parseInt("this.op1")/parseInt("this.op1");
                        break;
                }
            },

            cal2(){
                this.res=eval("parseInt(this.op1)"+this.opr+"parseInt(this.op2)");
            }
        }
    })
</script>

</body>
</html>

补充计算器4

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
    <center>
        <table border="1">
            <div id="app">

                <input type="text" v-model="num1">
                <select v-model="opt">
                    <option value="+">  +  </option>
                    <option value="-">  -  </option>
                    <option value="*">  *  </option>
                    <option value="/">  /  </option>
                </select>
                <input type="text" v-model="num2">
                <input type="button" value="=" v-on:click="js">
                <input type="text" v-model="num">
            </div>
        </table>
    </center>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                num1: "",
                num2: "",
                num: "0",
                opt: '+',
            },
            methods: {
                js(){
                    var codeStr = "parseInt(this.num1) "+this.opt+" parseInt(this.num2)"
                    this.num = eval(codeStr);
                }
            }
        })
    </script>
</body>
</html>