如何限制vue输入中的位数？

<template>
  <input v-model="limitedInput" />
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    };
  },
  computed: {
    limitedInput: {
      get() {
        return this.rawInput;
      },
      set(value) {
        this.rawInput = value.slice(0, 10); // 限制为10位
      }
    }
  }
};
</script>

<template>
  <input :value="rawInput" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    };
  },
  methods: {
    handleInput(event) {
      this.rawInput = event.target.value.slice(0, 10); // 限制为10位
    }
  }
};
</script>

<template>
  <input v-model="rawInput" maxlength="10" />
</template>

<script>
export default {
  data() {
    return {
      rawInput: ''
    };
  }
};
</script>

<template>
  <input v-model="rawInput" v-limit-length="10" />
</template>

<script>
export default {
  directives: {
    limitLength: {
      update(el, binding) {
        const maxLength = binding.value;
        if (el.value.length > maxLength) {
          el.value = el.value.slice(0, maxLength);
        }
      }
    }
  },
  data() {
    return {
      rawInput: ''
    };
  }
};
</script>