Question

Vue.js中v-if的一个小问题？

<table v-if="books.length==0">

</table>
<h2 v-else>购物车是空的</h2>
判断vue对象中data的books数组长度为0时，就隐藏该table，但是打开浏览器直接就全部隐藏了，而不是等我一个个删除完里面的元素再隐藏
换成 <table v-if="books.length">这样就显示正常
v-if后面不能跟比较运算符？

Answer 1

结果相反了，具体如下：

v-if="books.length == 0"

当books数组不为时，books.length == 0 布尔值为false，也就是v-if='false'，table是不显示的；

v-if="books.length"

当books数组不为时，books.length布尔值为true，也就是v-if='true'，table是显示的；

当你删除元素后，books为空时，books.length布尔值为false，也就是v-if='false'，table是隐藏的；

以上是解答过程，希望对您有帮助！

Answer 2

v-if判断的本质就是布尔值的true和false，只要能满足条件是可以有运算符的。你这个是逻辑问题，假如books.length本身是0，books.length == 0得到的布尔值是true，而0的布尔值是false，你两个判断的依据不同，得到的结果自然不一样。

追问

是我true跟false搞反了

Answer 3

判断条件写错，应为：
<table v-if="books.length>0">
...
</table>
<h2 v-else>购物车是空的</h2>