当前位置：首页 > VUE

vue实现atm

2026-02-25 15:31:33VUE

Vue 实现 ATM 机功能

使用 Vue 实现一个简单的 ATM 机功能，可以模拟存款、取款、查询余额等操作。以下是实现步骤：

创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create vue-atm

设计 ATM 组件

在 src/components 目录下创建 ATM.vue 文件，编写 ATM 机的主要逻辑。

<template>
  <div class="atm">
    <h1>ATM 机</h1>
    <div class="balance">
      <p>当前余额: {{ balance }} 元</p>
    </div>
    <div class="operations">
      <input v-model="amount" type="number" placeholder="输入金额" />
      <button @click="deposit">存款</button>
      <button @click="withdraw">取款</button>
      <button @click="checkBalance">查询余额</button>
    </div>
    <div class="message">
      <p>{{ message }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      balance: 1000,
      amount: 0,
      message: ''
    };
  },
  methods: {
    deposit() {
      if (this.amount <= 0) {
        this.message = '存款金额必须大于 0';
        return;
      }
      this.balance += this.amount;
      this.message = `成功存款 ${this.amount} 元`;
      this.amount = 0;
    },
    withdraw() {
      if (this.amount <= 0) {
        this.message = '取款金额必须大于 0';
        return;
      }
      if (this.amount > this.balance) {
        this.message = '余额不足';
        return;
      }
      this.balance -= this.amount;
      this.message = `成功取款 ${this.amount} 元`;
      this.amount = 0;
    },
    checkBalance() {
      this.message = `当前余额为 ${this.balance} 元`;
    }
  }
};
</script>

<style scoped>
.atm {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}
.operations {
  margin: 20px 0;
}
input {
  padding: 8px;
  margin-right: 10px;
}
button {
  padding: 8px 15px;
  margin: 5px;
  cursor: pointer;
}
.message {
  color: green;
  font-weight: bold;
}
</style>

在主组件中使用 ATM 组件

在 src/App.vue 中引入并使用 ATM 组件：

<template>
  <div id="app">
    <ATM />
  </div>
</template>

<script>
import ATM from './components/ATM.vue';

export default {
  name: 'App',
  components: {
    ATM
  }
};
</script>