vue点击tab改变背景颜色

Posted 2023-03-12

代码思路：
遍历出data里面的数据 v-for

给li加点击事件
绑定class样式 怎么控制样式的显示
通过 class的控制 :class=class:index==变量 下标和class变量是否相等控制true false
<template>
<div id="app">
<ul>
<li v-for='(item,index) in arr' :class='bg:index==isactive'
@click='fn(index)'>item</li>
</ul>
</div>
</template>
<script>
export default
data () return data: isactive:0, //默认第一个有样式 arr:['健康医疗','生活服务','信息安全','文化娱乐'],
,

,
methods:
fn (index)
//点击切换 变量的值 赋值为 index
this.isactive=index; console.log(index); ,</script> <style scoped lang='less'> .bg color: red; </style> 参考技术A