Vue中input输入框如何添加币种符号？3种实用方案详解

固定前置币种符号（适合单一固定币种场景）

很多国内项目只需要支持单一默认币种，比如人民币，此时最简单的方案就是通过CSS定位将币种符号固定在输入框左侧，无需额外逻辑处理,开发成本极低。

完整代码示例

<template>
  <div class="currency-input-wrapper">
    <!-- 固定前置的币种符号 -->
    <span class="currency-symbol">¥</span>
    <input 
      v-model.number="inputValue" 
      type="number"
      class="currency-input"
      placeholder="请输入金额"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 绑定原始输入的数字值
const inputValue = ref(0)
</script>
<style scoped>
.currency-input-wrapper {
  position: relative