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>