Vue implementa una calculadora simple (explicación)

Tabla de contenido

Requisitos del caso

Muestra de caso

Ideas de casos

Realice la vinculación del valor A y el valor B mediante la instrucción del modelo v
Vincular eventos al botón de cálculo para implementar la lógica de cálculo
Vincular el resultado del cálculo a la posición correspondiente

Implementar páginas estáticas

<div id='app'>
        <h1>简单计算器</h1>
        <div><span>数值A:</span><span><input type="text" v-model='a'></span></div>
        <div><span>数值B:</span><span type="text" v-model='b'></span></div>
        <div><button>计算</button></div>
        <div><span>计算结果</span><span></span></div>
    </div>

Importar Vue

<script type="text/javascript" src="js/vue.js"></script>

Agregar directivas para páginas estáticas

<div id='app'>
        <h1>简单计算器</h1>
        <div><span>数值A:</span>
            <span>
                <input type="text" v-model='a'>
            </span>
        </div>
        <div>
            <span>数值B:</span>
            <span>
                <input type="text" v-model='b'>
            </span>
        </div>
        <div>
            <button v-on:click="handle">计算</button>
        </div>
        <div><span>计算结果</span><span v-text="result"></span></div>
    </div>

Establecer función de cálculo

<script type="text/javascript">
        /*  */
        var vm = new Vue({
    
    
            el: "#app",
            data: {
    
    
                a: '',
                b: '',
                result: ''
            },
            methods: {
    
    
                handle: function () {
    
    
                    // 实现计算逻辑
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
            }
        });
    </script>

Código final

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
</head>

<body>
    <div id='app'>
        <h1>简单计算器</h1>
        <div><span>数值A:</span>
            <span>
                <input type="text" v-model='a'>
            </span>
        </div>
        <div>
            <span>数值B:</span>
            <span>
                <input type="text" v-model='b'>
            </span>
        </div>
        <div>
            <button v-on:click="handle">计算</button>
        </div>
        <div><span>计算结果</span><span v-text="result"></span></div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*  */
        var vm = new Vue({
     
     
            el: "#app",
            data: {
     
     
                a: '',
                b: '',
                result: ''
            },
            methods: {
     
     
                handle: function () {
     
     
                    // 实现计算逻辑
                    this.result = parseInt(this.a) + parseInt(this.b);
                }
            }
        });
    </script>
</body>

</html>

Automotivación

¡Motivémonos juntos! ¡Cree que seremos los creadores del próximo milagro! ¡Seremos mostrados a la escuela, maestros y estudiantes como un ganador! ¡Estaremos orgullosos de nuestros logros satisfactorios!