34 lines
709 B
Vue
34 lines
709 B
Vue
<template>
|
|
<div v-for="(item, index) in foodRankList.slice(0, MAX_RANK_COUNT)"
|
|
:key="index" class="rank-item">
|
|
<span class="rank-index">{{ index+1 }}.</span>
|
|
<span class="rank-content">{{ item.value }}</span>
|
|
<span class="rank-amount">{{ item.count }} 次</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFoodStore } from '@/store/food'
|
|
import { computed } from 'vue'
|
|
|
|
const foodStore = useFoodStore()
|
|
|
|
const MAX_RANK_COUNT = 10
|
|
|
|
const foodRankList = computed(() => {
|
|
return [{
|
|
value: '红烧肉',
|
|
count: 10
|
|
}, {
|
|
value: '红烧鱼',
|
|
count: 8
|
|
}, {
|
|
value: '排骨汤',
|
|
count: 5
|
|
}, {
|
|
value: '红烧带鱼',
|
|
count: 2
|
|
}]
|
|
})
|
|
</script>
|