master

分支 (1)

管理

管理

master

calculator
/
index.html

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

<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="app">
        <div class="calculator">
            <!-- 显示计算结果 -->
            <div class="result" style="grid-area:result">{{ equation }}</div>
            <!-- 按钮 -->
            <button style="grid-area: ac;" @click="clear">AC</button>
            <button style="grid-area: plus_minus;" @click="calculateToggle">±</button>
            <button style="grid-area: percent;" @click="calculatePercent">%</button>
            <button style="grid-area: add;" @click="append('+')">+</button>
            <button style="grid-area: subtract;" @click="append('-')">-</button>
            <button style="grid-area: multiply;" @click="append('x')">x</button>
            <button style="grid-area: divide;" @click="append('÷')">÷</button>
            <button style="grid-area: equal;" @click="calculate">=</button>

            <button style="grid-area: number_1;" @click="append('1')">1</button>
            <button style="grid-area: number_2;" @click="append('2')">2</button>
            <button style="grid-area: number_3;" @click="append('3')">3</button>
            <button style="grid-area: number_4;" @click="append('4')">4</button>
            <button style="grid-area: number_5;" @click="append('5')">5</button>
            <button style="grid-area: number_6;" @click="append('6')">6</button>
            <button style="grid-area: number_7;" @click="append('7')">7</button>
            <button style="grid-area: number_8;" @click="append('8')">8</button>
            <button style="grid-area: number_9;" @click="append('9')">9</button>
            <button style="grid-area: number_0;" @click="append('0')">0</button>

            <button style="grid-area: dot;" @click="append('.')">.</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.common.dev.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>