VueJs 条件把手

Question

我正在尝试按照 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}}

Answer 1

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

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

Answer 2

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

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

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

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

Answer 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

Answer 4

或者：

使用 v-if 有条件地渲染

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

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

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

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

Answer 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>

VueJs 条件把手

VueJs Conditional handlebars

javascript

eslint

vue.js