用Vue制作的简易计算器

最新推荐文章于 2025-10-24 21:49:30 发布

原创

最新推荐文章于 2025-10-24 21:49:30 发布 · 699 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue.js框架开发一个简单的计算器应用，涵盖了组件化、响应式数据绑定、事件处理等核心概念。

<html>
<body>
<div id="demo">
    <h2>简单加减乘除计算器</h2>
    <p>请输入第一个数：<input type="text" v-model="firNum"></p>
    <p>请输入第二个数：<input type="text" v-model="secNum"></p>
    <p>
        <button @click="plus">+</button>
        <button @click="dec">-</button>
        <button @click="multiple">x</button>
        <button @click="devise">/</button>
    </p>
    <p>计算结果：<span v-text="result"></span></p>
</div>
<script>
    var v = new Vue({
        el:"#demo",
        data:{
            firNum:"",
            secNum:"",
            result:""
        },
        methods:{
            plus:function () {
              // this.result = this.firNum + this.second;  //这样只是字符拼接
                this.result = parseInt(this.firNum) + parseInt(this.secNum);
            },
            dec:function () {
                this.result = parseIn