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