教你textarea文本框的placeholder文字如何换行

2022年09月04日 技术资料 1584 views 0

textarea为前端常用的文本输入框,有时候需要placeholder的文字提示更加友好,那样提示文字可能就需要换行。


原生实现
原生textarea的实现方式如下:

 是unicode字符中的换行符。


vue中实现
在vue中这种写法是无效的,在这里插入图片描述,应该是编译过程中unicode字符会被转义
所以我们需要使用v-bind配合 \n 进行换行



同样也可以使用模板字符串

<textarea
  rows="6"
  style="width: 300px;padding: 0;"
  :placeholder="
`标题
正文
结尾`
"
></textarea>


👍好活当赏🧧