vue 使用自定义事件的表单输入组件

最新推荐文章于 2025-07-10 20:06:27 发布

hyc127

最新推荐文章于 2025-07-10 20:06:27 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_38929096/article/details/80041284

学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个Vue自定义货币输入组件的实现方法，包括如何使用v-model双向绑定，以及如何在子组件中对输入的货币值进行格式化处理和位数限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个官方文档的例子~

<currency-input v-model="price"></currency-input>

这里的v-model相当于：①v-bind:value="price"(这个value是指props['value']，可以任意定义) ② @input="price=arguments[0]"

Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\          //这里的第一个value是指<input>的value不能改变，另一个是props['value']             
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value
        // 删除两侧的空格符
        .trim()
        // 保留 2 位小数
        .slice(
          0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      // 如果值尚不合规，则手动覆盖为合规的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通过 input 事件带出数值
      this.$emit('input', Number(formattedValue))
    }
  }
})