在 Vue.js 模板里如何判断对象是否为空？

【需求】

已知在 data 中定义了一个对象变量 details：

data() {
    return {
        details: {}
    }
}

在模板中需要判断 details 是否为空，如果为空则显示“暂无数据”，否则显示 details 的内容：

<div>暂无数据</div>
<div>
    <!-- 显示 details 的内容 -->
</div>

【解决】

在 Vue.js 的模板中可以使用 Objects.keys(obj).length 方法判断对象是否为空，Objects.keys(obj) 返回一个包含 obj 所有属性名的数组，如果这个数组的长度为 0，则说明对象为空。

<div v-if="Object.keys(details).length === 0">暂无数据</div>
<div v-else>
    <!-- 显示 details 的内容 -->
</div>