vue MAC输入框

你可以使用 Vue 的 v-model 指令来实现一个 MAC 地址输入框。具体实现方式如下：

<template>
  <div>
    <label for="mac-address">MAC 地址：</label>
    <input type="text" id="mac-address" v-model="macAddress" maxlength="17">
  </div>
</template>

<script>
export default {
  data() {
    return {
      macAddress: ''
    }
  },
  watch: {
    macAddress(val) {
      // 将输入框中的字母转换为大写
      this.macAddress = val.toUpperCase()
      // 格式化 MAC 地址
      this.formatMacAddress()
    }
  },
  methods: {
    formatMacAddress() {
      let mac = this.macAddress.replace(/[^0-9a-fA-F]/g, '')
      let formattedMac = ''
      for (let i = 0; i < mac.length; i++) {
        formattedMac += mac[i]
        if ((i + 1) % 2 === 0 && i !== mac.length - 1) {
          formattedMac += ':'
        }
      }
      this.macAddress = formattedMac
    }
  }
}
</script>

在上面的代码中，我们使用了 v-model 指令来绑定输入框的值到组件的 data 属性 macAddress 上。同时，我们使用了 watch 监听 macAddress 的变化，将输入框中的字母转换为大写，并且格式化 MAC 地址。最后，我们将格式化后的 MAC 地址重新赋值给 macAddress，这样就可以在输入框中显示格式化后的 MAC 地址了。