用 Deepseek 写的uniapp油耗计算器

原创

已于 2025-04-17 13:18:33 修改 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #vue.js #deepseek #gpt-3 #gpt #chatgpt

于 2025-04-17 11:43:26 首次发布

下面是一个基于 Uniapp 的油耗计算器实现，包含 Vue 组件和页面代码。

1. 创建页面文件

在 pages 目录下创建 fuel-calculator 页面：

<!-- pages/fuel-calculator/fuel-calculator.vue -->
<template>
  <view class="container">
    <view class="calculator">
      <view class="header">
        <text class="title">油耗计算器</text>
      </view>
      
      <view class="input-group">
        <text class="label">当前油价 (元/升)</text>
        <input 
          type="number" 
          v-model="price" 
          placeholder="例如：7.85" 
          class="input"
          @input="validateInput('price')"
        />
      </view>
      
      <view class="input-group">
        <text class="label">加油金额 (元)</text>
        <input