如何使用 PUG 获取 VueJS 修饰符答案

【问题标题】：How to get VueJS modifiers with PUG如何使用 PUG 获取 VueJS 修饰符
【发布时间】：2018-11-26 22:45:32
【问题描述】：

我们如何使用 Pug 获得修饰符？

我尝试了以下方法：

my-component(:options.sync="addresses")

my-component(':options.sync'="addresses")

这两个都给出了语法错误，意外的标记。

my-component(:options="addresses")

被编译，但当然会错过最终 HTML 中的修饰符。

如果 pug 无法做到这一点，有没有办法将原始 HTML 集成到 PUG 模板中，以便我可以仅使用 HTML 指定该组件，而其余部分使用 PUG 语法？

【问题讨论】：

你到底想输出什么？我正在使用 pug 和 vue.js 并且从来没有遇到过这个问题。
看看this codepen，它把my-component(:options="addresses")渲染成<my-component :options="addresses"></my-component>，和预期的一样。
另外，codepen 将my-component(:options.sync="addresses") 呈现为<my-component :options.sync="addresses"></my-component>
我不知道为什么会这样，但确实如此。然后我会进一步挖掘:(
我很难理解“已编译但当然会错过最终 HTML 中的修饰符”。确切的意思。这有点模糊，你能发布更多的细节吗？

【解决方案1】：

要回答这部分问题，您可以在元素末尾输出带有竖线或句点字符的原始 HTML。

...有什么方法可以将原始 HTML 集成到 PUG 模板中，这样我就可以只使用 HTML 指定该组件，而其余的使用 PUG 语法？

在一行的开头使用管道，您将获得该行的原始输出。例如，这将在管道之后呈现确切的字符串：

| <div>
|   <a href='https://example.com'>Link to site</a>
| </div>

句点在块之后使用，以将所有子元素输出为原始文本。这将输出与上面的代码块相同的 HTML：

div.
  <a href='https://example.com'>Link to site</a>

【讨论】：