Vue循环中如何使用v-if判断kittens数组长度最大的项并展示标识

直接用Vue的计算属性来维护kittens的最大长度即可，它天然是响应式的，会随cats数组的变动自动更新。

1. 定义计算属性获取最大长度 #

选项式API写法 #

export default {
  data() {
    return {
      // 你的cats数组
      cats: [
        {"name": "Tom","kittens": [{"name": "Dan"}]},
        {"name": "Bob","kittens": [{"name": "Lil"},{"name": "Sue"},{"name": "Alf"}]}
      ]
    }
  },
  computed: {
    biggestNumber() {
      // 兼容空数组场景，避免返回NaN
      if (!this.cats.length) return 0
      // 提取所有猫的kittens长度，取最大值
      return Math.max(...this.cats.map(cat => cat.kittens.length))
    }
  }
}

组合式API写法 #

import { ref, computed } from 'vue'

const cats = ref([
  {"name": "Tom","kittens": [{"name": "Dan"}]},
  {"name": "Bob","kittens": [{"name": "Lil"},{"name": "Sue"},{"name": "Alf"}]}
])
const biggestNumber = computed(() => {
  if (!cats.value.length) return 0
  return Math.max(...cats.value.map(cat => cat.kittens.length))
})

2. 模板内直接使用 #

你的原有模板逻辑无需改动，直接按你写的判断即可：

<li v-for="cat in cats" :key="cat.name">
  {{ cat.name }}
  <span v-if="cat.kittens.length === biggestNumber">Top parent</span>
</li>

补充说明 #

• 如果存在多只猫的kittens数量同为最大值，所有符合条件的猫都会展示标识，符合常规需求
• 计算属性自带缓存，只有cats数组变动时才会重新计算最大值，性能远优于在模板内调用方法判断

内容的提问来源于stack exchange，提问作者Saro