Vue.js实现双数组动态循环遍历判断元素存在性输出状态

核心逻辑是遍历days数组的每一项，通过数组includes方法判断当前值是否存在于wdays数组中，按规则输出对应标记即可，不需要额外写复杂的循环处理逻辑。

完整代码示例 #

模板部分 #

直接用v-for遍历days数组渲染列表，在插值表达式里完成状态判断：

<template>
  <ul>
    <li v-for="day in days" :key="day">
      {{ day }} : {{ wdays.includes(day) ? 'present' : 'not present' }}
    </li>
  </ul>
</template>

脚本部分 #

Vue2 选项式API写法

<script>
export default {
  data() {
    return {
      days: [0, 1, 2, 3, 4, 5, 6],
      wdays: [2, 3, 6]
    }
  }
}
</script>

Vue3 组合式API写法

<script setup>
const days = [0, 1, 2, 3, 4, 5, 6]
const wdays = [2, 3, 6]
</script>

渲染结果 #

代码运行后会输出符合要求的列表：

• 0 : not present
• 1 : not present
• 2 : present
• 3 : present
• 4 : not present
• 5 : not present
• 6 : present

如果需要对判断逻辑做复用，也可以把状态判断抽成独立方法或者计算属性，直接在模板里调用即可。

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