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>