vue实现给当前元素添加样式，其他元素无样式

vue实现给当前元素添加样式，其他元素无样式

今天做项目的时候遇到，给当前元素绑定样式，原来使用原生js写点亮盒子的时候都是利用for循环，循环元素列表，在利用this来绑定当前元素，给当前元素添加类名或类样式，当然在添加类样式前，还要将所有添加过的类样式移除掉，然而vue就没有这么麻烦，咱们直接上代码 -_-

<template>
  <div class="content">
    <span 
    v-for="(item, index) in datas"  //遍历我们的数组
    class="btn" 
    :class="{active:index==isShow}"  //看vue官方文档可以通过boolean值控制样式的显隐性
    @click="changeColor(index)">{{item.city}}</span> //在点击的时候我们将index的值传到方法中
  </div>
</template>
<script>
export default {
  data() {
    return {
      datas: [
        { city: "上海" },
        { city: "北京" },
        { city: "关东" },
        { city: "安徽" }
      ],
      isShow: -1
    };
  },
  methods: {
    changeColor(index) {
      console.log(index);
      this.isShow = index
    }
  }
};
</script>
<style scoped>
.content {
   width: 300px;
   margin:100px auto;
}
.btn {
  display: inline-block;
  margin: 10px;
  border: 1px solid #666;
  border-radius: 10px;
  padding:4px 8px;
  color: #5e13b4;
  font-size: 14px;
  cursor: pointer;
}
.active {
  background-color: #5e13b4;
  color: #fff;
}
</style>