Question

我是VueJS的新手，我有一个简单的HTML标记，可以在其中迭代一些对象并以html形式呈现它们：

<div v-for="item in some_counter">
 <p v-if="item.some_param1 !== 'None'">
  [[ item.some_param2 ]]
 </p>
</div>

但是，我注意到即使条件评估为false，我也会看到一个额外的HTML <div></div>标记。来自Django世界对我来说似乎很奇怪。

如何避免这种额外的标记？

Answer 1

v-if适用于放置它的元素。因此，如果要有条件地包含<div>，则需要将v-if放在<div>（或父元素）上。它不会仅仅因为它为空而删除<div>。

从技术上讲，您可以在同一元素上同时使用v-for和v-if，但是通常不建议这样做，因为试图理解先应用哪个会造成混淆（请参阅https://vuejs.org/v2/guide/list.html#v-for-with-v-if）。相反，您应该为<template>包括一个包装v-for：

<template v-for="item in some_counter">
  <div v-if="item.some_param1 !== 'None'">
    <p>
      [[ item.some_param2 ]]
    </p>
  </div>
</template>

<template>标记很特殊，不会在完成的DOM中添加额外的元素。

另一种方法是过滤计算属性中的项目列表，然后遍历模板中的过滤列表。

vuejs条件渲染留下了额外的html标记

1 个答案: