vue 简易计算器-蒲公英云

vue 简易计算器

vue 刚入门实现简易计算器

如果是刚学习vue，不懂得地方可以问我哦，互相交流能更好的帮助学习。
话不多说，亮代码最重要。。。

<!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="app">
            <input type="text"  v-model="num1">
            <select name="select" v-model="opt" id="select">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text"  v-model="num2">
            <button @click="count()">=</button>
            <input type="text" placeholder="结果" v-model="result">
        </div>
        <script type="text/javascript">
            new Vue({ 
                el:"#app",
                data:{ 
                    num1: 0,
                    num2: 0 ,
                    opt:"+",
                    result: 0,
                },
                methods:{ 
                    count(){ 
                    // 方法1
                        //this.result=eval(this.num1+this.opt+this.num2)
                        //eval（） 将字符串按js代码执行
                        //方法2
                        switch(this.opt){ 
                            case "+" :
                                this.result =Number(this.num1)   +  Number(this.num2) ;
                                break;
                            case "-" :
                                this.result = this.num1  -  this.num2;
                                break;
                            case "*" :
                                this.result = this.num1  *  this.num2;
                                break;
                            case "/" :
                                this.result=this.num1  /  this.num2;
                                break;
                        }
                    }
                }
            })
        </script>
    </body>
</html>