Vue computed 计算属性语法

1. 不传参

import { ref, computed} from "vue";
let carnoColor = computed(()=>{ return formatterCarnoColor(model.value.carnoColor)  }) 

 

2. 传参

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

 

3. 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>