Vue 3 能否通过类名挂载多个元素？求数字格式化输入方案

问题背景 #

需要给多个原生<input type="text" class="number-format">添加千分位格式化功能，通过Vue实现双向绑定的格式化逻辑，但目前使用Vue.createApp(...).mount(".number-format")只能挂载第一个匹配元素，且不想使用自定义组件（如<number-format-input>）。

解决方案 #

方案1：遍历元素逐个挂载Vue实例

Vue的mount方法传入选择器时仅会匹配第一个元素，因此可以手动获取所有目标输入框，为每个元素单独创建并挂载Vue实例，实现独立的格式化逻辑：

<!-- HTML 部分 -->
<input type="text" class="number-format">
<input type="text" class="number-format">
<input type="text" class="number-format">

// Vue 代码
const numberInputOptions = {
  computed: {
    numberModel: {
      get() {
        // 空值时返回空，避免显示0
        return this.value ? new Intl.NumberFormat().format(this.value) : '';
      },
      set(n) {
        // 移除千分位逗号，转换为整数，空值重置为''
        const cleaned = n.replaceAll(',', '');
        this.value = cleaned ? parseInt(cleaned, 10) : '';
      }
    }
  },
  data() {
    return {
      value: ''
    }
  }
};

// 遍历所有目标输入框，逐个挂载实例
document.querySelectorAll('.number-format').forEach(inputEl => {
  Vue.createApp(numberInputOptions).mount(inputEl);
});

方案2：使用自定义指令（更优雅高效）

如果不想为每个元素单独挂载实例，可以自定义Vue指令，统一处理所有需要格式化的输入框，代码更简洁：

<!-- HTML 部分 -->
<div id="app">
  <input type="text" v-number-format>
  <input type="text" v-number-format>
</div>

// Vue 代码
const app = Vue.createApp({});

// 自定义数字格式化指令
app.directive('number-format', {
  mounted(el) {
    let rawValue = '';

    // 格式化显示内容
    const formatDisplay = () => {
      el.value = rawValue ? new Intl.NumberFormat().format(rawValue) : '';
    };

    // 处理输入事件，清理输入内容并更新原始值
    el.addEventListener('input', e => {
      const cleanedInput = e.target.value.replace(/,/g, '');
      rawValue = cleanedInput ? parseInt(cleanedInput, 10) : '';
      formatDisplay();
    });

    // 失去焦点时再次格式化，确保显示正确
    el.addEventListener('blur', formatDisplay);
  }
});

app.mount('#app');

注意事项 #

• 方案1中每个输入框对应独立的Vue实例，数据完全隔离，适合需要单独管理状态的场景；
• 方案2通过指令统一处理，性能更优，适合批量处理无独立状态需求的场景；
• 如果需要支持小数格式化，可将parseInt替换为Number，并调整格式化逻辑适配小数显示。

内容的提问来源于stack exchange，提问作者JYL