Vue3实现计算器

最新推荐文章于 2025-03-28 16:47:11 发布

jacob~

最新推荐文章于 2025-03-28 16:47:11 发布

阅读量1k

点赞数 7

文章标签： javascript 前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_74239807/article/details/137969325

版权

本文详细展示了如何在Vue3中使用V-model和计算属性(computed)构建一个具有实时计算功能的计算器组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3实现计算器

说明：绿色背景的是文本框，两个文本框中间的是下拉列表框，=号是按钮；下拉列表框中有+、-、*、/等四个选项。单击“=”按钮，给出计算结果。

<template>
<div class="arithmetic-info">
    <input type="text"  v-model="state.number1" class="box1">
    <select v-model="state.sign">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="state.number2" class="box2">
    <button @click="count" class="box3">=</button>
    {{ result }}
</div>
   </template>
   
<script setup lang='ts'>
    import {ref,reactive} from 'vue'
    let state = reactive({
        number1: '',
        number2: '',
        sign: '+'
    })
    let result = ref()
    function count(){
    if(state.sign === '+')
        result.value = Number(state.number1) + Number(state.number2);
    else if(state.sign === '-')
        result.value = Number(state.number1) - Number(state.number2);
    else if(state.sign === '*')
        result.value = Number(state.number1) * Number(state.number2);
    else if(state.sign === '/')
        result.value = Number(state.number1) / Number(state.number2);
 } 
</script>
   
 <style scoped>
   .box1{
    background-color: chartreuse;
    border-color: coral;
    margin-right: 20px;
    width: 80px;
    height: 23px;
   }
   
   .box2{
    background-color: chartreuse;
    border-color: coral;
    margin-right: 20px;
    margin-left: 20px;
    width: 80px;
    height: 23px;
   }
   
   .box3{
    margin-right: 10px;
   }
   .arithmetic-info{
   background-color:white;
   border-radius: 10px;
    padding: 10px;
   }
   </style>

效果：
在这里插入图片描述

新版本：自动给出计算结果：

<template>
<div class="arithmetic-info">
    <input type="text"  v-model="state.number1" class="box1">
    <select v-model="state.sign">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="state.number2" class="box2">
    <font color="coral">计算结果是：</font><span>{{count}}</span>{{ result }}
</div>
   </template>
   
<script setup lang='ts'>
    import {ref,reactive, computed} from 'vue'
    let state = reactive({
        number1: '',
        number2: '',
        sign: '+'
    })
    let result = ref()
    let count = computed(()=>{
    if(state.sign === '+')
        result.value = Number(state.number1) + Number(state.number2);
    else if(state.sign === '-')
        result.value = Number(state.number1) - Number(state.number2);
    else if(state.sign === '*')
        result.value = Number(state.number1) * Number(state.number2);
    else if(state.sign === '/')
        result.value = Number(state.number1) / Number(state.number2);
 } )
</script>

 <style scoped>
   .box1{
    background-color: chartreuse;
    border-color: coral;
    margin-right: 20px;
    width: 80px;
    height: 23px;
   }
   
   .box2{
    background-color: chartreuse;
    border-color: coral;
    margin-right: 20px;
    margin-left: 20px;
    width: 80px;
    height: 23px;
   }
   </style>