Question

我正在尝试使用vueJs 2.0中的把手按照their documentation使用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语法，那么文档仅列出了为Vue.js做的几行内容。您可以使用v-if指令。

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

如果你提到的那样，你想要在Vue.js旁边使用Handlebars，请注意它们都在模板中使用相同的{{花括号。您可能需要更改Vue对花括号的使用，如此...

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

Answer 2

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

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

Answer 3

Vue条件渲染语法

<br>Choose Type
<select name="productType" form="addRequest" id="productType">
    <option value="EXHAUST">EXHAUST</option>
    <option value="HEATER">HEATER</option>
    <option value="BOILER">BOILER</option>
    <option value="OTHER">OTHER</option>
</select>

<br>Choose Model
<select name="productModel" form="addRequest" id="productModel">
    <c:forEach items="${products}" var="product">
         <option value="${product.getModel()}">${product.getModel()}</option>
    </c:forEach>
</select>

<script>
    $("#productType").change(function () {
            var productList = ${products};
            var chosenType = $("#productType").val();
            productList.filter(function (p) {
            return p.getType() == chosenType
                })

            $.populateSelect($('#productModel').get(0), productList)
    })
</script>

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

Answer 4

要么：

使用v-if进行条件渲染

>>> data = read_with_dropdown("dropdown.xlsx", "Sheet1", "A1:E5")
>>> data
[['Column 1', 'Column 2', 'Column 3', 'Column 4', ['yes', 'no', 'yes1', 'no1']],
 [None, None, None, None, None],
 [None, None, None, None, None],
 [None, None, None, None, None],
 [None, None, None, None, None]]

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

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

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

VueJs有条件的把手

4 个答案: