Vue.js v-if和页面加载

Question

我在laravel刀片中有这个元素：

 <span 
      v-if="notificationsCount !== 0" 
      class="pl-2 text-def font-bold" 
      v-text="notificationsCount">
</span>

在这种情况下，我检查是否为notificationsCount > 0，然后显示此notificationsCount。

页面加载时，此元素将以类pl-2加载

css：

.pl-2 { padding-left: 10px } 

如何在页面加载时删除此填充，而在notificationsCount > 0时如何获取此填充？

Answer 1

尝试使用类似的内容：

<span v-if="notificationsCount !== 0" v-bind:class="{ pl-2: notificationsCount }" class="text-def font-bold" v-text="notificationsCount"></span>

希望有帮助。

Answer 2

：class =“ {pl-2：notificationsCount <0}”

Answer 3

答案是here，

<span v-if="notificationsCount !== 0" v-bind:class="{ 'pl-2': notificationsCount > 0 }"></span>

但是

当notificationsCount为0时，我可能会指出任何类或任何文本均无效，因为根本没有呈现该节点。