0
点赞
收藏
分享

微信扫一扫

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>
举报

相关推荐

0 条评论