vue3 有个文本框 需要要校验“企业专属福利活动名称”录入内容是否为2-100个字符，否则提示“企业专属福利活动名称不能为空，需录入2-100个字符。怎么写

在Vue3中，你可以使用自定义的v-model指令，并配合`v-bind:class`或计算属性来进行这样的输入验证。首先，你需要创建一个名为`activityName`的`ref`对象，然后在模板上绑定到输入框。下面是一个简单的示例：

<template>
  <div>
    <input type="text" v-model="activityName.value" :class="{ error: !isValidActivityName }" placeholder="企业专属福利活动名称">
    <span v-if="!isValidActivityName" class="error-message">企业专属福利活动名称不能为空，需录入2-100个字符。</span>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const activityName = ref('');
let isValidActivityName = true;

function validateActivityName() {
  if (!activityName.value || activityName.value.length < 2 || activityName.value.length > 100) {
    isValidActivityName = false;
  } else {
    isValidActivityName = true;
  }
}

// 当输入发生改变时触发验证
watch(activityName, validateActivityName);

validateActivityName(); // 初始验证

// 如果需要实时校验，可以将 validateActivityName 添加到 input 的 @input 事件中
// <input ... @input="validateActivityName" />
</script>

<style scoped>
.error {
  border-color: red;
}
.error-message {
  color: red;
}
</style>

在这个例子中，当用户输入的内容不符合要求时，`error` 类会被添加到输入框上，显示错误消息。