HarmonyOS第四次培训笔记

category: 

    
        
            
                分类
            
            
                食材
            
            {type === 'category'}}" class= "cate-header-nav-slider" >
                分类
            
            
                食材
            
        
    
    

import menuData from "../../common/data/cook-category.json"
export default {
    data: {
        title: "",
        type:'category',
        menuData:[]
    },
    onInit() {
        this.title = this.$t('strings.world');
        this.menuData = menuData.data
    },
    computed : {
        filteredMenuData() {
            return this.menuData[this.type]}
    },

    handleSliderClick(type){
        this.type = type
    }

}

 menu:

    
        {$item === currentTab ? 'active' : 'normal'}}"
                for= "{{tabs}}"
                @click="handleTabClick($item)">
            {{$item}}
        
    

    
        {lists}}">
            
                {{$item}}
            
        
    

export default {
    props: ['menuData', 'firstItem'],
    data() {
        return {
            currentTab: this.firstItem
        }
    },
    computed: {
        tabs() {
            return Object.keys(this.menuData)
        },
        lists() {
            return this.menuData[this.currentTab]
        },
        handleTabClick(currentTab) {
            this.currentTab = currentTab
        },
        onReady() {
            this.$watch('firstItem', (newValue) => {
                this.currentTab = newValue
            })
        }
    }
}

APP实例