我有一个输入字段，根据用户输入的字符数，该输入字段会自动替换为文本区域和相同的内容：
<textarea v-if="myString.length > 20" v-model="myString"/> <input type="text" v-if="myString.length <= 20" v-model="myString"/>
我遇到的问题是，当用户输入第 21 个字符时焦点会丢失。因此，用户会感到恼火，因为当他键入第 22 个字符时，该字符没有出现在文本区域中（没有焦点）。 我怎样才能将焦点设置在新渲染的文本区域上？这里的问题是它会自动渲染。否则我可以在文本区域上设置一个引用并调用 focus()。
另一个问题是删除第 21 个字符以及从文本区域切换回输入元素。
（复制我的评论，因为这可能会有所帮助）
用
textarea替换input元素可能会产生糟糕的用户体验。为什么不从一开始就使用textarea呢？如果您希望样式根据输入长度而改变，例如如果超过 20 个字符，则增加高度，那么您可以使用 CSS 来做到这一点。演示（分叉来自@tony19）
您可以将
textarea/input包装在组件中，并使用其mounted挂钩来调用其focus()，如以下组件所示：演示
虽然这在技术上是可行的，但这种用户体验可能并不理想，您应该考虑其他不需要像这样集中输入的设计（如 @kien_coi_1997 所示）。