Vue目前为止一个小结，简易计算器

• Z时代
• 2024-01-10
• 分类：综合

<div id="app">
        <h1>简易计算器</h1>
        <div>
            <span>数值A</span>
            <span>
                <input type="number" v-model="a" name="name" value="" />
            </span>
        </div>
        <div>
            <span>数值B</span>
            <span>
                <input type="number" v-model="b" name="name" value="" />
            </span>
        </div>
        <input id="Button1" v-on:click.stop="handle" type="button" value="计算" />
        <div>
            <span>计算结果</span>
            <span v-text="sum">
            </span>
        </div>
    </div>

var vm = new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
            sum: ""
        },
        methods: {
            handle: function () {
                //实现计算逻辑
                this.sum = parseInt(this.a) + parseInt(this.b);
            }
        }
    })

我个人认为，现在做一个小结还是挺好的

分析一下计算器中用到的技术点，

v-model双向绑定，能够直接获取到我们输入的值

v-text 显示出计算后的值，无闪动

 v-on:click.stop 点击事件以及事件修饰符

以上是 Vue目前为止一个小结，简易计算器 的全部内容， 来源链接： utcz.com/z/380609.html