textarea文本框的placeholder文字换行
一、问题描述二、原生实现三、vue中实现一、问题描述
textarea为前端常用的文本输入框,有时候需要placeholder的文字提示更加友好,那样提示文字可能就需要换行。
二、原生实现
原生textarea的实现方式如下:
<textarearows="6"style="width: 300px;padding: 0;"placeholder="标题 正文 结尾"></textarea>
是unicode字符中的换行符。
三、vue中实现
在vue中这种写法是无效的
应该是编译过程中unicode字符会被转义
所以我们需要使用v-bind配合\n
进行换行
<textarearows="6"style="width: 300px;padding: 0;":placeholder="'标题\n正文\n结尾'"></textarea>
同样也可以使用模板字符串
<textarearows="6"style="width: 300px;padding: 0;":placeholder="`标题正文结尾`"></textarea>