vue的v-if简单使用，判断对象是否为空

Jz_Stu

已于 2024-03-22 04:28:16 修改

阅读量2.7w

点赞数 8

分类专栏： vue 文章标签： vue.js html5 js

于 2021-02-28 02:34:16 首次发布

本文链接：https://blog.csdn.net/Jz_Stu/article/details/114199467

版权

3 篇文章 0 订阅

订阅专栏

场景：

Vue的一个简单使用场景，涉及到v-if和v-show的使用，以及如何在JavaScript中判断一个JSON对象是否为空。

在Vue中，v-if和v-show都用于根据条件来显示或隐藏DOM元素，但它们的工作机制有所不同。

当条件为假时，Vue不会渲染该元素，也不会在DOM中留下任何痕迹。当条件为真时，Vue会重新渲染该元素。这意味着，v-if是一个“懒惰”的渲染，它不会在条件改变时简单地切换元素的可见性，而是会真正地添加或移除DOM元素。

无论条件是真还是假，Vue都会渲染该元素，只是通过修改元素的CSS属性（通常是display属性）来控制其可见性。当条件为真时，元素可见；当条件为假时，元素隐藏，但仍在DOM中。

在比较值时，需要注意一些细节。例如，不能在v-if中直接使用!=来比较，因为Vue的模板表达式需要是有效的JavaScript表达式，而!=在某些情况下可能不会按照预期工作（尤其是在与null或undefined比较时）。（可以使用 == ）

顺便简单的记录一下我理解的v-show和v-if的区别：v-show是不符合条件的话，dom元素还在，但是不显示出来；v-if不符合条件的话，是没有dom元素的。像下面的代码中，如果v-if不符合的话，那么就没有那个div元素，使用v-show的话其实是还在的，但是没显示出来。

<div v-if="pageRespData.totalPage==0">
     <span v-if="param==''">暂时没有数据，快点录入吧</span>
     <span v-else>暂时没有检索数据，换个关键词试试</span>
</div>

判断一个JSON对象（在JavaScript中通常是一个普通的对象）是否为空，有多种方法。

这种方法将对象转换为JSON字符串，然后检查它是否等于空对象{}的字符串表示形式。这种方法的一个潜在缺点是，如果对象中的属性值本身就是空字符串或数字0，那么即使对象非空，这种方法也可能会误判为空。

JSON.stringify(data) === '{}'

这种方法使用Object.keys()来获取对象的所有键，然后检查键的数量是否为0。这种方法更加直接，且不会受到对象属性值类型的影响。

Object.keys(data).length === 0

通过遍历对象的属性来检查是否有属性存在。这种方法较为繁琐，且在ES6之后通常不推荐使用。

for (let key in data) {  
    if (data.hasOwnProperty(key)) {  
        return false; // 对象非空  
    }  
}  
return true; // 对象为空

这些方法可以用来获取对象的值或键值对数组，然后检查数组长度是否为0。

Object.values(data).length === 0  
// 或者  
Object.entries(data).length === 0

有些库提供了辅助函数来检查对象是否为空，例如lodash的_.isEmpty()函数。

关注

专栏目录