<template>
  <div class="content">
    <span 
    v-for="(item, index) in datas"  //遍歷我們的數(shù)組
    class="btn" 
    :class="{active:index==isShow}"  //看vue官方文檔可以通過(guò)boolean值控制樣式的顯隱性
    @click="changeColor(index)">{{item.city}}</span> //在點(diǎn)擊的時(shí)候我們將index的值傳到方法中
  </div>
</template>
<script>
export default {
  data() {
    return {
      datas: [
        { city: "上海" },
        { city: "北京" },
        { city: "關(guān)東" },
        { 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:["選項(xiàng)1","選項(xiàng)2","選項(xiàng)3","選項(xiàng)4","選項(xiàng)5","選項(xiàng)6"],
            clicked:0   //標(biāo)識(shí)，初始化默認(rèn)選中第一項(xiàng)
        }
    },
    methods:{
        changeTab(index){
            this.clicked = index;
        }
    }
}

.bor{
   border:2px solid black;
}