Question

我的模板上有这个标记：

p_p

但是结果是元素仍然像这样在DOM上打印：

struct trip

如果该属性未定义或为空，则我应该在v-if上做什么以完全不输出html <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>标签？

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>

Answer 2

只需使用：

<p v-if="location.address2">{{ location.address2 }}</p>

编辑：

证明有效：

https://jsfiddle.net/ok2un1qj/

Answer 3

尝试更改

<p v-if="location.address2 !== undefined">{{ location.address2 }}</p>

到

<p v-if="location.address2">{{ location.address2 }}</p>

Answer 4

问题非常简单，您没有关闭p标签<p>{{ location.address1 }}<p>，因此浏览器关闭了p的{{1}}标签并打开了一个空{{1 }}，然后 Vue 渲染location.address1，因为未定义<p></p>。 是我们可以实现的另一种优化。我们不需要将location.address2与<p v-if="location.address2 !== undefined">进行比较。如果location.address2与undefined或v-if不同，则location.address2将返回true。检查以下代码段：

null

undefiend

Answer 5

其他职位提出的解决方案应始终可行，但是另一种选择是串联使用double logical NOT来显式强制将任何值转换为相应的 boolean 原语。

!!location.address2 // Enforces boolean value -> True if it contains a value, false otherwise

演示

new Vue({
  el: '#app',

  data() {
    return {
      location: {
        address1: 'Some address',
        address2: undefined
      }
    }
  },

  methods: {
    addAddress2() {
      this.location.address2 = 'Address 2';
    }
  }
})

#app>p {
  background-color: lavender;
  padding: 3px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>{{ location.address1 }}</p>
  <p v-if="!!location.address2">{{ location.address2 }}</p>

  <button @click="addAddress2">Add address 2</button>
</div>

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

5 个答案:

演示