分享

vue3的computed计算属性传参

 和帅书馆 2024-11-25 发布于广东

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

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

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

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

  1. <ss-vue-calendar>
  2. <template #tbodyCell="scope">
  3. <span v-if="getCurrentDayDetailed(scope.item)">
  4. {{getCurrentDayDetailed(scope.item)}}
  5. </span>
  6. </template>
  7. </ss-vue-calendar>
  8. <script lang='ts'>
  9. const getCurrentDayDetailed = computed(() => (item: any) => {
  10. return item.id==='123'
  11. })
  12. </script>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多