使用ul標簽制作簡單的菜單（vue模板）

先看一下效果圖：

 

簡單粗暴，上代碼：

<template>
    <div class="listMenu-wrap">
        <ul class="list-ul" v-for="(item, index) in data" :key="index">
            <li :class="[currentIndex === index ? 'active' : '']" @click="handleClick(index, item)">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "ListMenu",
        data() {
            return {
                currentIndex: 0,
                data:[
                    "項目列表1",
                    "項目列表2",
                    "項目列表3",
                    "項目列表4"
                ]
            }
        },
        methods: {
            handleClick(index, item) {
                this.currentIndex = index
            }
        }
    }
</script>

<style scoped lang="scss">
.listMenu-wrap{
    .list-ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li{
            line-height: 30px;
            font-size: 16px;
            padding: 3px 15px;

            &:hover{
                cursor: pointer;
                background-color: rgba(69, 86, 118, 0.44);
                color: #ffffff;
            }
        }
    }
    .active{
        color: #409EFF;
    }
}
</style>

 

原文鏈接：https://www.cnblogs.com/yiliangmi/p/15241571.html