javascript - 如果属性未定义，Vue JS 不显示 <p>

Question

我的模板上有这个标记:

<div class="locButton" v-for="location in locResult.slice(0, 4)">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}<p>
  <p v-if="location.address2 !== undefined">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

但结果该元素在 DOM 上仍然像这样打印:

<div class="locButton">
   <h5>Name</h5> 
   <p>Address1</p>
   <p></p><!----> 
   <p>Phone</p>
</div>

为了不输出 html <p>，我应该在 v-if 上做什么如果该属性未定义或为空，则根本没有标记？

Answer 1

您的第一个 <p></p> 有错字标签

<div class="locButton" v-for="location in locResult.slice(0, 4)">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}<p> <-- THIS NEED TO BE </p>
  <p v-if="location.address2 !== undefined">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>