谢谢大家，请问一个关于数组索引隐藏的问题？

Question

我有一组索引数组，[2,5,6,9,10]

然后还有10个list
<ul>

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>

</ul>

我想按照索引数组，给ul里的li元素 进行隐藏，也就是第二个，第五个，第六个，第九个，第10个，隐藏，请问这如何去操作呢？

Answer 1

vue3版

<ul v-for="(item, index) in newArr" :key="index + 'arr'">
    <li>{{ item }}</li>
</ul>

import {
    ref,
    computed
} from 'vue'
<script setup >
  let num = ref(12);
  let screen = [2, 5, 6, 9, 10]

  let newArr = computed(() => {
      let arr = []
      for (let i = 0; i < num.value; i++) {
          screen.includes(i) && arr.push(i)
      }
      return arr
  })

</script>

vue2版：

<ul v-for="(item, index) in newArr" :key="index + 'arr'">
    <li>{{ item }}</li>
</ul>
data(){
    return {
        num:12,
        screen:[2,5,6,9,10]
    }
},
computed: {
    newArr(){
        let arr = []
        for (let i = 0; i < num; i++) {
            screen.includes(i) && arr.push(i)
        }
        return arr
    }
}

Answer 2

写一个计算数学，将对应符合的返回，然后渲染

Answer 3

使用 计算属性 或者 v-if 都是可以的。比较合理的是使用计算属性。因为你会经常变，用 v-if 判断的话，执行消耗会比计算属性多。

提示就是判断的时候可以用 includes 来判断。具体可以看 @水水水水果果果 的回答。

Answer 4

<script>
let arr = [2, 5, 6, 9, 10]
for (let i = 0; i < arr.length; i++) {

document.querySelector(`ul li:nth-child(${arr[i]})`).style.opacity = 0

}
</script>