如何在Vue.js中处理空数组数据

<template>
  <div>
    <p v-if="dataArray.length === 0">数组为空</p>
    <ul v-else>
      <li v-for="item in dataArray" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<template>
  <div>
    <ul>
      <li v-for="item in arrayWithDefault" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataArray: [],
      defaultArray: [{ id: 1, name: '默认项' }] // 默认数组
    };
  },
  computed: {
    arrayWithDefault() {
      return this.dataArray.length === 0 ? this.defaultArray : this.dataArray;
    }
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="(item, index) in dataArray" :key="item.id">{{ item.name }}</li>
      <p v-if="dataArray.length === 0">数组为空</p>
    </ul>
  </div>
</template>