在vue.js中检查插值是否为空

Question

我有一个条件的循环。如果IF条件为false，则不绑定数据，但是如果插值值为空，我想绑定一些值。

<span v-for="pai in paid">
       <b v-if="pai.bill_no==report.bill_no" >
            {{ +pai.paid + report.paid==='' ? (+pai.paid + report.paid) : data  }}
        </b>    
</span>

当值为空时，此处的数据变量未打印。 如果条件为假且插值值为空，我该如何打印？

Answer 1

您可以使用v-else directive

new Vue({
  el:"#app",
  data:{
    paid:[
      {bill_no:1},
      {bill_no:2},
      {bill_no:3},
    ],
    report:{bill_no:2}
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div v-for="pai in paid">
       <b v-if="pai.bill_no==report.bill_no" >
            {{ +pai.paid + report.paid==='' ? (+pai.paid + report.paid) : 'data'  }}
        </b>    
        <b v-else>Something else</b>
</div>
</div>