VueJs 条件车把答案

【问题标题】：VueJs Conditional handlebarsVueJs 条件车把
【发布时间】：2018-01-15 10:55:22
【问题描述】：

我正在尝试按照their documentation 使用 vueJs 2.0 中的把手使用 VueJs 条件渲染，但 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}}

【问题讨论】：

标签： javascript vue.js eslint

【解决方案1】：

我认为这只是记录条件不在父标签上，而是直接放在您要有条件地显示的节点上。

换句话说，它只是一个比较，不是 Vue.js 标记的一部分，而是 Handlebars 的一部分。

【讨论】：

这可能更适合作为评论

【解决方案2】：

如果您尝试使用 Vue.js 语法，文档仅概述了为 Vue.js 所做的几行。您将使用 v-if 指令。

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

如果像您提到的那样，您希望将 Handlebars 与 Vue.js 一起使用，请注意它们都在模板中使用相同的 {{ 花括号。您可能需要像这样更改 Vue 对花括号的使用...

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

【讨论】：

【解决方案3】：

Vue条件渲染语法

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

原始文档中的详细信息。 https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

【讨论】：

【解决方案4】：

要么：

使用 v-if 条件渲染

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

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

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

两者都可以使用，但要小心使用 v-if，因为如果不满足条件，元素将不会在 DOM 中。

【讨论】：

【解决方案5】：

首先，您应该查看 vue 文档 .https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-showjs 顺便说一下，您可以使用“v-if”和“v-show”属性，在流相关例子。

<h1 v-if='isShow'>Test</h1>
<h1 v-show='isShow'>Test</h1>

【讨论】：