vue实现点击列表改变背景色

 

代码思路：

遍历出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>

转载于：https://www.jb51.net/article/147385.htm