textarea文本框的placeholder文字换行

一、问题描述

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

二、原生实现

原生textarea的实现方式如下：

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


是unicode字符中的换行符。

三、vue中实现

在vue中这种写法是无效的

应该是编译过程中unicode字符会被转义

所以我们需要使用v-bind配合\n进行换行

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

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

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