时间戳

首页 > 解决方案 > vuejs条件渲染留下额外的html标记

vue.js - vuejs条件渲染留下额外的html标记

问题描述

我是 VueJS 的新手，我有一个简单的 HTML 标记，我在其中迭代一些对象并将它们呈现在 html 中，如下所示：

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

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

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

标签： vue.jsvuejs2

解决方案

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

从技术上讲，您可以同时拥有v-for和v-if在同一个元素上，但通常不鼓励这样做，因为试图理解首先应用哪个可能会令人困惑（参见https://vuejs.org/v2/guide/list.html#v-for-with -v-如果）。相反，您应该包含一个<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 添加额外的元素。

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

推荐阅读