Vue实现简易计算机

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue实现自定义计算器</title>
    <!--    引进Css样式码   -->
    <link rel=stylesheet href="./d-1.css">
</head>

<body>
    <div id="app">
        <div id="app1">
        <input type="number" v-model.number="num1" />
        <select name="" id="" v-model.number="operator">
            <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>
        <strong>{{res}}</strong>
        </div>
    </div>
    <!--    需联网    -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <!--    引进js代码    -->
    <script src="./d-1.js"></script>
</body>

</html>

javascript


const vm = new Vue({
    el: "#app",
    data() {
        return {
            num1: 0,
            num2: 0,
            operator: 0,
            res: 0
        }
    },
    methods: {
        cal() {
            switch (this.operator) {
                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;
            }
        }
    }
});


#app{
    100%;
   height: 80%;
   background-color: skyblue;
   position: absolute;
}

#app1{
   position: relative;
   top: 5%;
   left: 30%;
}