1. 列表 样式切换
<template>
<div class="homeContainer">
<ul class="headList">
<li class="item" v-for="item in navList" :key="item.id" :class="{‘active‘: curSort === item.id}" @click="navHandle(item.id)">{{item.name}}</li>
</ul>
</div>
</template>
<script>
export default {
name: ‘homePage‘,
data () {
return {
curSort: 1,
navList: [
{ id: 1, name: ‘首页‘, active: ‘true‘ },
{ id: 2, name: ‘关于我们‘ },
{ id: 3, name: ‘产品‘ },
{ id: 4, name: ‘资讯‘ },
{ id: 5, name: ‘合作伙伴‘ },
{ id: 6, name: ‘加入我们‘ }
]
}
},
methods: {
navHandle (id) {
this.curSort = id
}
}
}
</script>
原文:https://www.cnblogs.com/linsxl/p/12945032.html