Vue.js加载时双引号内占位符内容不可见问题咨询

这个问题我碰到过，其实是Pug的属性解析规则在搞鬼！你当前的写法里，单引号包裹的属性值中出现了双引号，Pug解析时会错误地把内部的双引号当成属性值的结束标记，导致页面初始渲染的HTML里，placeholder属性只被解析到Try 就截断了——只有等Vue的JS完成加载、重新解析模板后，才会生成正确的完整属性，所以才会出现延迟显示的情况。

要让页面加载时就显示完整的Try "Android"，可以试试这几种方法：

• 转义内部双引号：在单引号包裹的属性值里，给双引号加上转义符\，让Pug把它识别为字符串的一部分：

  input(placeholder='Try \"Android\"')
  

• 更换属性值的包裹引号：用双引号包裹整个属性值，内部的双引号同样转义，或者直接用单引号作为内容里的引号（如果需求允许的话）：

  // 转义内部双引号
  input(placeholder="Try \"Android\"")
  // 或者把内容里的双引号换成单引号（如果符合需求）
  input(placeholder="Try 'Android'")
  

• 使用反引号包裹属性值：Pug支持用反引号来包裹属性值，这样内部的双引号不需要转义就能被正确识别：

  input(placeholder=`Try "Android"`)
  

以上几种方法都能让Pug正确解析出完整的placeholder属性值，页面初始渲染的HTML就会带有完整的占位文本，加载时就能直接显示出来啦。

内容的提问来源于stack exchange，提问作者Diolor