用Vue制作的简易计算器

关注

VIP免费原创最新推荐文章于 2026-05-07 10:01:29 发布 716 阅读 AI 写同款· GEO 优化 ›

Vue小案例：Vue制作简易计算器 问题：使用Vue制作简易计算器。如下图所示思路：首先定义三个文本框（两个输入的数、计算的结果），一个按钮，触发事件用v-model双向绑定数据，v-on绑定点击事件难点是select中选中项的获取代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt 阅读详情

<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