<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js实现简单的Tab切换效果播</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active {
color: red;
cursor: pointer;
}
.unactive {
color: black;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<ul v-for="(menu,index) in menus">
<li :id="'menu'+menu.id" @click="menuClick(index)" :class="{'active':index===num}">{{menu.name}}</li>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
num: 0,
menus: [
{
id: 1,
name: "新闻",
icon: "../xx.png"
},
{
id: 2,
name: "产品",
icon: "../xx.png"
},
{
id: 3,
name: "动态",
icon: "../xx.png"
}
]
},
methods: {
menuClick: function(index) {
this.num = index;
}
}
});
</script>
</html>
https://baijiahao.baidu.com/s?id=1698978486875222364&wfr=spider&for=pc
