面试题：Vue 中如何结合计算属性实现简单表单动态字段

Question

假设你有一个 Vue 表单，其中有一个输入框和一个显示区域。当输入框输入内容时，显示区域根据输入内容的长度显示不同的提示信息（长度小于5提示'太短'，大于等于5小于10提示'适中'，大于等于10提示'太长'）。请使用计算属性实现该功能，写出关键的 Vue 组件代码。

Answer 1

<template>
  <div>
    <input v-model="inputValue" />
    <p>{{ tip }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  computed: {
    tip() {
      const length = this.inputValue.length;
      if (length < 5) {
        return '太短';
      } else if (length < 10) {
        return '适中';
      } else {
        return '太长';
      }
    }
  }
};
</script>