实验1 Vue3项目案例——简易计算器

<template>
  <div id="app">
    <div class="calculator-display">{{ current || '0' }}</div>
    <button @click="clear" class="span-two">AC</button>
    <button @click="sign">+/-</button>
    <button @click="percent" class="orange">%</button>
    <button @click="operation('/')" class="orange">÷</button>
    <button @click="operation('7')">7</button>
    <button @click="operation('8')">8</button>
    <button @click="operation('9')">9</button>
    <button @click="operation('*')" class="orange">×</button>
    <button @click="operation('4')">4</button>
    <button @click="operation('5')">5</button>
    <button @click="operation('6')">6</button>
    <button @click="operation('-')" class="orange">-</button>
    <button @click="operation('1')">1</button>
    <button @click="operation('2')">2</button>
    <button @click="operation('3')">3</button>
    <button @click="operation('+')" class="orange">+</button>
    <button @click="operation('0')">0</button>
    <button @click="dot">.</button>
    <button @click="operation('=')" class="span-two">=</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      current: '',
      previous: null,
      operator: null,
      waitingForOperand: true
    };
  },
  methods: {
    // 方法定义省略，同上述代码
  }
};
</script>
 
<style>
/* 样式定义省略，同上述代码 */
</style>

这个简易的Vue 3计算器示例展示了如何使用Vue 3的模板和方法来实现一个基本的计算器功能。它包括了按钮绑定、数据处理和样式设置，但省略了具体的计算逻辑实现，这些实现应该根据具体的业务逻辑来编写。