vue导航点击切换 1.0

效果展示：

一、首先实现nav点击改变样式

<div class="title">
        <div class="recommendation-title1" 
　　　　　　　　:class="show1==1? 'redtitle':'commontitle'" 
　　　　　　　　@click="turnRed1()">蔬菜</div>
        <div class="recommendation-title2"
 　　　　　　　:class="show2==1? 'redtitle':'commontitle'" 
　　　　　　　　@click="turnRed2()">水果</div>
        <div class="recommendation-title3" 
　　　　　　　　:class="show3==1? 'redtitle':'commontitle'" 
　　　　　　　　@click="turnRed3()">肉类</div>
        <div class="recommendation-title4" 
　　　　　　　　:class="show4==1? 'redtitle':'commontitle'" 
　　　　　　　　@click="turnRed4()">熟食</div>
        </div>
</div>

 export default {
        data() {
            return {
                 show1:'1',
                 show2:'',
                 show3:'',
                 show4:'',
                        }
        methods: {
            turnRed1:function(){
                this.show1=1;
                this.show2=0;
                this.show3=0;
                this.show4=0;
            },
             turnRed2:function(){
                this.show2=1;
                this.show1=0;
                this.show3=0;
                this.show4=0;
            },
             turnRed3:function(){
                this.show3=1;
                this.show1=0;
                this.show2=0;
                this.show4=0;
            },
             turnRed4:function(){
                this.show4=1;
                this.show1=0;
                this.show2=0;
                this.show3=0;

                    }
                        }

解析 

:class    当show为1时，class名为redtitle，否则为commontitle

method   点击当前nav的show为1，其他nav的show为0.

二、nav点击切换内容

v-if判断是否点击，点击显示    // 循环内容省略

<ul class="sc" v-if="show1==1" >
                <li v-for="sc in scs" :key="sc.name">
                    <div class="body-a">
                        <a href="">
                            {{sc.name}}
                        </a>
                    </div>
                </li>
            </ul>

三、所有代码   

//折叠了

<template>
    <div class="nav">
        <div class="title">
        <div class="recommendation-title1" :class="show1==1? 'redtitle':'commontitle'" @click="turnRed1()">蔬菜</div>
        <div class="recommendation-title2" :class="show2==1? 'redtitle':'commontitle'" @click="turnRed2()">水果</div>
        <div class="recommendation-title3" :class="show3==1? 'redtitle':'commontitle'" @click="turnRed3()">肉类</div>
        <div class="recommendation-title4" :class="show4==1? 'redtitle':'commontitle'" @click="turnRed4()">熟食</div>
        </div>
        <div class="body">
            <ul class="sc" v-if="show1==1" >
                <li v-for="sc in scs" :key="sc.name">
                    <div class="body-a">
                        <a href="">
                            {{sc.name}}
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="sg" v-if="show2==1" >
                <li v-for="sg in sgs" :key="sg.name">
                    <div class="body-a">
                        <a href="">
                            {{sg.name}}
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="rl" v-if="show3==1" >
                <li v-for="rl in rls" :key="rl.name">
                    <div class="body-a">
                        <a href="">
                            {{rl.name}}
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="ss" v-if="show4==1" >
                <li v-for="ss in sss" :key="ss.name">
                    <div class="body-a">
                        <a href="">
                            {{ss.name}}
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                 show1:'1',
                 show2:'',
                 show3:'',
                 show4:'',
                 scs:[
                {name:"土豆"},
                {name:"生菜"},
                {name:"豌豆"},
                {name:"花菜"},
            ],
            sgs:[
                {name:"苹果"},
                {name:"香蕉"},
                {name:"西瓜"},
                {name:"芒果"},
                {name:"车厘子"},
            ],
            rls:[
                {name:"排骨"},
                {name:"猪蹄"},
                {name:"牛舌"},
            ],
            sss:[
                {name:"炒面"},
                {name:"炒饭"},
                {name:"煎饼"},
                {name:"寿司"},
            ],
            }
        },
        methods: {
            turnRed1:function(){
                // console.log(111);
                this.show1=1;
                this.show2=0;
                this.show3=0;
                this.show4=0;
            },
             turnRed2:function(){
                this.show2=1;
                this.show1=0;
                this.show3=0;
                this.show4=0;
                // console.log(222);
            },
             turnRed3:function(){
                // console.log(333);
                this.show3=1;
                this.show1=0;
                this.show2=0;
                this.show4=0;
            },
             turnRed4:function(){
                // console.log(444);
                this.show4=1;
                this.show1=0;
                this.show2=0;
                this.show3=0;
            }
        },
    }
</script>

<style lang="less" scoped>
.body-a :hover{
    text-decoration: underline;
    color: red;
}
.body-a{
    display: flex;
    align-items: flex-start;
}
.body ul{
    display: flex;;
    flex-wrap: wrap;
}
.body li{
    overflow: hidden;
    display: block;
    border: 1px solid rgb(223, 223, 223);
    font-size: 14px;
    overflow: hidden;
    padding: 0 5px;
    width: 154.5px;
    height: 50px;
    line-height: 50px;
}
.commontitle{
    color: black;
    cursor: pointer;
    font-size: 20px;
    width: 125px;
    height: 37px;
    line-height: 40px;
}
.redtitle{
    color:#de2013;
    border-bottom: 3px solid#de2013;
}
.recommendation-title1:hover,.recommendation-title2:hover,.recommendation-title3:hover,.recommendation-title4:hover{
    color:#de2013;
    border-bottom: 3px solid#de2013;
}
.recommendation-title1,.recommendation-title2,.recommendation-title3,.recommendation-title4{
    cursor: pointer;
    font-size: 20px;
    width: 125px;
    height: 37px;
    line-height: 40px;
}
.title{
    display: flex;
    // justify-content: space-evenly;
    background-color: rgb(223, 223, 223);
    width: 500px;
    height: 40px;
}
.nav{
    border: 1px solid rgb(180, 179, 179);
    width: 500px;
    height:200px;
}
a{
    color: black;
    text-decoration: none;
}
li{
    list-style-type: none;
}
ul{
    list-style: none;    /*清除列表默认样式*/
    padding: 0;      /*清除padding*/
    margin: 0;
}
</style>