Vue: 仅在缩进根元素后Vue.js mustach才能正确呈现

创建于 2018-04-29 · 4评论 · 资料来源: vuejs/vue

版

2.5.16

复制链接

重现步骤

当根元素没有缩进并且胡子被分成几行时，就会发生此问题。

<template>
<div>
    <p>{{
        myVar
    }}</p>
</div>
</template>

仅当根元素缩进时，胡须才能正确渲染。

<template>
    <div>
        <p>{{
            myVar
        }}</p>
    </div>
</template>

同样有效的是将小胡子放在一行中且根元素未缩进时。

<template>
<div>
    <p>{{ myVar }}</p>
</div>
</template>

期望什么？

小胡子应绑定数据

实际发生了什么？

小胡子变成纯文本

只想美化我的代码，所以我将胡须分成几行并删除了根元素的缩进。

bug has PR

资料来源

DanielSharkov

最有用的评论

为什么有人会用这种方式编写代码？

syntacticsolutions 于 2018-05-08

👍4 👎2

所有4条评论

可以使用<template>和root element之间的单个空格工作：

<template> <p>{{
  myVar
}}</p></template>

它们之间没有空格：

<template><p>{{ 
  myVar
}}</p></template>

Alexander-Taran 于 2018-05-04

为什么有人会用这种方式编写代码？

syntacticsolutions 于 2018-05-08

👍4 👎2

@syntacticsolutions没关系，事实上这是一个错误，对吗？

DanielSharkov 于 2018-05-08

👍1

谢谢@DanielSharkov ，这应该是一个错误。

使用缩进的不同行为的根本原因是在下面： https :

    if (c === ' ' || c === '\t') {
      type = c
      cur = count(line, type)
      if (cur < min) {
        min = cur
      }
    } else {
      return str

也许我们应该添加\ r？文本内插正则表达式中的模式：

https://github.com/vuejs/vue/blob/5e3823a5766da1df60481e1e7a20f36d08e716ce/src/compiler/parser/text-parser.js#L6 -L13

defcc 于 2018-05-09

此页面是否有帮助？

0 / 5 - 0 等级