如果属性未定义，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>

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

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>