textarea文本框的placeholder文字换行

textarea文本框的placeholder文字换行一、问题描述二、原生实现三、vue中实现一、问题描述textarea为前端常用的文本输入框，有时候需要placeholder的文字提示更加友好，那样提示文字可能就需要换行。二、原生实现原生textarea的实现方式如下：<textarearows="6"style="width: 300px;padding: 0;"placeholder

程序员的脱发之路

6036人浏览 · 2022-01-13 15:19:26

程序员的脱发之路 · 2022-01-13 15:19:26 发布

textarea文本框的placeholder文字换行

一、问题描述
二、原生实现
三、vue中实现

一、问题描述

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^