Vue中點擊active，並第一個默認選中

在jQuery中：
就是讓第一個選中，其餘的不選中！
當點擊後當前選中，其餘不選中。
有一種繞口令：東邊的喇嘛買了西邊的喇叭
o((⊙﹏⊙))o

在Vue中快速建立與選中
1.遍歷出來， 在click中賦值 遍歷出來的mx。
2.class進行決定是否顯示，一點擊就把對應的mx賦到activeName中
3.此時activeName就和mx如出一轍的文本，而後返回一個true能顯示當前的了
4.把最後一個瑕疵補上， 讓第一個默認選中。就是把activeName放一個數值就好了

<template>
  <div id="app">
    <ul>
      <li v-for="(mx, key) in list" @click="ck(mx)" :class="[{active: activeName == mx}]">
        {{mx}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ['網易', '騰訊', '愛奇藝', '優酷', '土豆', '鬥魚'],
        activeName: '網易'
      }
    },
    methods: {
      ck(mx) {
        this.activeName = mx
      }
    }
  }
</script>

<style lang="less">
  .box {
    margin-top: 50px;
    ul {
      list-style: none;
      text-align: center;
      padding: 0;
      width: 85%;
      margin: auto;
      margin-top: 30px;
      li {
        padding: 15px;
        border-radius: 30px;
      }

      li.active {
        color: red;
        transition: all .8s;
        background: #000;
        color: #fff;
      }
    }
  }
</style>