vue获取数组第1个元素

<template>
  <div>
    <p>第一个元素是: {{ firstItem }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    firstItem() {
      return this.items.length > 0 ? this.items[0] : null;
    }
  }
};
</script>

<template>
  <div v-if="items.length">
    <p>第一个元素是: {{ items[0] }}</p>
  </div>
  <div v-else>
    <p>数组为空</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    // 假设这是一个异步获取数据的函数
    this.fetchData();
  },
  methods: {
    async fetchData() {
      // 模拟API调用
      const response = await fetch('your-api-endpoint');
      this.items = await response.json();
    }
  }
};
</script>