VueJs条件车把

Question

我正在尝试使用VueJs的条件渲染，在VueJs2.0中使用handlebars，按照their documentation，但是eslint返回了错误：

- avoid using JavaScript keyword as property name: "if" in expression {{#if ok}}
- avoid using JavaScript keyword as property name: "if" in expression {{/if}}

VueJs似乎没有渲染它。

<!-- Handlebars template -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

Answer 1

如果您正在尝试使用Vue.js语法，文档中只列出了针对Vue.js所做的几行内容。您可以使用v-if指令。

<h1 v-if="ok">Yes</h1>

如果像你提到的那样，你想在使用Vue.js的同时使用Handlebar，请注意它们在模板中都使用了相同的{{大括号。您可能需要更改Vue对花括号的使用，如下所示...

Vue.config.delimiters = ['<%', '%>'];

Answer 2

任一：

使用v-if有条件地呈现

<h1 v-if="isVisible"> Yes </h1>

或者使用v-show将隐藏属性添加到该元素样式

<h1 v-show="isVisible"> Yes </h1>

这两种方法都可以使用，但要小心使用v-if，因为如果不满足条件，元素就不会出现在DOM中。

Answer 3

我相信这只是为了证明条件不在父标记上，而是直接放在你想要有条件显示的节点上。

换句话说，这只是一种比较，不是Vue.js标记的一部分，而是Handlebar的一部分。