vue3的computed计算属性传参

作者: cheng 发布时间: 2022-10-25 浏览: 1350 次 编辑

vue3的computed计算属性传参

在使用计算属性时,尤其是有v-for和slot插槽的使用时,进行一些参数的传递。

1. 在v-for中使用计算属性传参。

<div v-for="item in list">
    <div v-if='isShow(item)'>是否显示</div>
</div>
 
<script>
import {computed} from 'vue'
const currentId=ref(null)
 
const isShow=computed(()=>(item:any)=>{ //计算属性传递参数
    return currentId=== item.id
})
</script>

2. 在slot插槽中计算属性传参。

<ss-vue-calendar>
    <template #tbodyCell="scope">
        <span v-if="getCurrentDayDetailed(scope.item)">
            {{getCurrentDayDetailed(scope.item)}}
        </span>
    </template>
 </ss-vue-calendar>
 
<script lang='ts'>
    const getCurrentDayDetailed = computed(() => (item: any) => {
      return item.id==='123'
    })
</script>