vue3 computed筛选数据渲染列表

vue3 中不支持filter过滤器，v-for和v-if 不可在同一个标签中同时使用，除了用template标签包裹一下，还可以用computed属性来实现。

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

<script setup lang='ts'>
import { reactive, computed } from 'vue'

const state = reactive({
    list: [
        {
            id: 1,
            name: 'zhangsan',
            isshow: true
        },
        {
            id: 2,
            name: 'lisi',
            isshow: false
        },
        {
            id: 3,
            name: 'wangwu',
            isshow: true
        },
        {
            id: 4,
            name: 'zhaoliu',
            isshow: false
        },
        {
            id: 5,
            name: 'chenqi',
            isshow: true
        },
    ],
})

interface ob {
    id:number,
    name:string,
    isshow:boolean
}

let list2 = computed(() => {
    let arr:Array<ob> = []
    state.list.forEach(el => {
            if (el.isshow == false) {
                arr.push(el)
            }
        })
    return arr

})

</script>

记录一下。