Vue的ul下如何從多個li標籤中選中指定的li，並顯示不同顏色，其他li保持原狀不變？--- js實現

背景：

做項目老是遇到這個需求，但是每次都會想不起來，就去百度查，然後查到又不是我想要的答案，所以本次就記錄下來以後能方便查看。

1.效果展示：

2.需求分析：

。。。實現上圖所示。。。

3.思路設計：

對於array遍歷展示，我相信很多人都會使用v-for去實現，那麼如何要讓程序知道你點中了哪個li節點呢？

這個放在jquery是很容易實現的，但是我們不需要用jquery。在Vue中動態改變節點我們喜歡用:class和ref，好，把ref扔一邊，我們講class實現，:class可以接收到變量,，能從v-for中獲取到的有value,key,index，那麼就可以：
<li v-for="(item, i) in list" :key="i" :class="'list_'+i">{{item}}</li>

這樣子實現不同的li對應有唯一的class，然後我們實現點擊事件：
<li v-for="(item, i) in list" :key="i" :class="'list_'+i" @click="clickItem(i)">{{item}}</li>

然後拿到值後就拼裝值，當然你也可以直接傳"'list_'+i"過去，這個看個人，clickItem拿到值後就能用js獲取dom，通過dom的style控制樣式改變，然後我們需要判斷用戶點擊了哪個li節點，好的，看源碼實現。

4.源碼實現：

<template>
  <div class="body">
    <ul>
      <li v-for="(item, i) in list" :key="i" :class="'list_'+i" @click="clickItem(i)">
        {{item}}
      </li>
    </ul>
    點擊了第{{index}}, 數值爲{{list[index]}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      list:['全部','大陸','香港','臺灣','美國',
                  '法國','英國','日本','韓國','德國','泰國',
                  '印度','意大利','西班牙','加拿大','其他'],
      index:0
    }
  },
  methods:{
    clickItem(idx){
      var obj = null
      var len = this.list.length
      this.index = idx
      for(var i=0;i<len;i++){
        if(i == idx){
          document.getElementsByClassName("list_"+i)[0].style.backgroundColor = "yellow"
        }else{
          document.getElementsByClassName("list_"+i)[0].style.backgroundColor = ""
        }
      }
    }
  },
  mounted(){
    this.clickItem(this.index)
  }
}
</script>

<style scoped lang="less">
.body{
  padding: 0;
  margin: 0;
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    background: pink;
    width: 1200px;
    height: 300px;
    li{
      float: left;
      margin-left: 15px;
    }
    li:hover{
      cursor: pointer;
    }
  }
}
</style>

5.測試結果：

6.關於說明：

1.實現方法有很多，本示例只提供js實現思路
2.後期如果有需要用到其他方式實現，會進行更新
3.轉載請說明出處！！！
點贊收藏