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>

<ul>
    <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
</ul>

export default {
    data(){
        return{
            dataList:["选项1","选项2","选项3","选项4","选项5","选项6"],
            clicked:0   //标识，初始化默认选中第一项
        }
    },
    methods:{
        changeTab(index){
            this.clicked = index;
        }
    }
}

.bor{
   border:2px solid black;
}