注释很详细，直接上代码
上一篇
新增内容
- vue绑定动态样式
- 根据点击事件获取当前点击部分序号
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}#tabBar{height: 50px;width: 100vw;}ul{display: flex;border-bottom: 3px red solid;padding: 0 10px;height: 100%;}li{height: 100%;list-style: none;font-weight: bold;text-align: center;line-height: 50px;width: 100px;}li.active{background-color: red;color: white;}</style>
</head><body><!-- 挂载点 --><div id="root"><div id="tabBar"><ul><li :class="{active:index===current}" @click="onClick(index)"v-for="(item,index) in tabBarLists" :key="item.id">{{item.name}}</li></ul></div></div><!-- 导入vue的js代码：不会下载的看专栏第一篇 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据current:0,//当前高亮tabBarLists:[{id:1,name:'甜点饮料'},{id:2,name:'蔬菜水果'},{id:3,name:'面包蛋糕'}]},methods: {// 方法onClick(index){// 点击事件this.current = index}}})</script>
</body></html>
效果演示
