VueJS计算器无法显示数字问题求助及代码排查

核心问题分析 #

1. 脚本加载时机错误：原代码中Vue实例脚本放在<head>内，此时DOM尚未渲染完成，Vue无法找到挂载目标#calcolatri，导致数据绑定失效，数字无法显示。
2. cliccato变量逻辑缺失：初始状态为false但无触发设为true的场景，导致输入清空逻辑永远无法生效。

修复步骤及修正后代码 #

1. HTML代码调整（脚本位置+等号方法绑定）

将Vue实例脚本移到</body>前，确保DOM加载完成后初始化Vue；同时给等号按钮绑定计算方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calcolatrice</title>
    <link rel="stylesheet" type="text/css" href="Calcss.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="icon" href="Cal.png">
    <link href="https://fonts.googleapis.com/css2?family=Belanosima:wght@600&family=Pangolin&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div class="Tittolo">
        <div class="barra"> 
            <h1>DraCanculator</h1>
        </div>
    </div>
    <div id="app">
        <div id="calcolatri">
            <div id="schermo">{{numCorrente}}</div>
            <div @click="segno" class="btn">-/+</div>
            <div @click="" class="btn">%</div>
            <div @click="" class="btn">log</div>
            <div @click="cancella" class="btn operatore">C</div>
            <div @click="inserici(7)" class="btn">7</div>
            <div @click="inserici(8)" class="btn">8</div>
            <div @click="inserici(9)" class="btn">9</div>
            <div @click="" class="btn operatore">÷</div>
            <div @click="inserici(4)" class="btn">4</div>
            <div @click="inserici(5)" class="btn">5</div>
            <div @click="inserici(6)" class="btn">6</div>
            <div @click="" class="btn operatore">x</div>
            <div @click="inserici(1)" class="btn">1</div>
            <div @click="inserici(2)" class="btn">2</div>
            <div @click="inserici(3)" class="btn">3</div>
            <div @click="" class="btn operatore">-</div>
            <div @click="inserici(0)" class="btn">0</div>
            <div @click="puntoop" class="btn">.</div>
            <div @click="calcola" class="btn operatore">=</div>
            <div @click="" class="btn operatore">+</div>
        </div>
    </div>
    <!-- 移至body末尾，确保DOM加载完成 -->
    <script src="CalJs.js"></script>
</body>
</html>

2. JavaScript代码调整（挂载目标+逻辑完善）

修正Vue挂载目标为根容器#app，补充calcola方法触发cliccato状态，完善清空逻辑：

new Vue ({
    el: '#app',
    data:{
        numCorrente: '',
        cliccato: false
    },
    methods:{
        inserici(numero){
            if(this.cliccato){
                this.numCorrente = '';
                this.cliccato = false; 
            } 
            this.numCorrente = `${this.numCorrente}${numero}`;
        },
        cancella(){
            this.numCorrente = '';
            this.cliccato = false;
        },
        segno() {
            this.numCorrente = this.numCorrente.charAt(0) === '-' ?
                this.numCorrente.slice(1) : `-${this.numCorrente}`;
        },
        puntoop(){
            if (this.numCorrente.indexOf('.') === -1){
                this.inserici('.');
            }
        },
        calcola(){
            this.cliccato = true;
            // 基础计算逻辑（可按需扩展）
            try {
                let expr = this.numCorrente.replace('x', '*').replace('÷', '/');
                this.numCorrente = eval(expr).toString();
            } catch(e) {
                this.numCorrente = 'Error';
            }
        }
    }
});

3. CSS代码保持不变

原样式逻辑正常，无需修改：

body {
    background-color: #2c2929;
    color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: 'Belanosima', sans-serif;
    font-family: 'Pangolin', cursive; 
}
.barra {
    background-color: rgb(57, 165, 105);;
    padding: 1px 0;
    margin-top: 2.5%;
    margin-bottom: 3%;
}
h1{
    font-size: 40px;
}
#calcolatri {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(40px, auto);
    width: 80vh;
    text-align: center;
    font-size: 30px;
    margin: 10px auto;
    background-color: #595757;
    border-radius: 10px;
}
#schermo{
    display: grid;
    grid-column: 1/5;
    margin-bottom: 5%;
    align-items: center;
    text-align: center;
    justify-content: center;
    
}
.btn {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin: 1.5px;
    background-color: #807d7d;
}
.operatore{
background-color: mediumseagreen;
}

修复效果说明 #

• 点击数字按钮后，屏幕将正常显示输入内容
• 点击等号完成计算后，再点击数字会自动清空之前的结果
• 点击C按钮可直接清空当前输入及状态

内容的提问来源于stack exchange，提问作者Fabrizzio Machado