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 {
  list-style: none;
  text-align: center;
  padding: 0;
  width: 85%;
  margin: auto;
  margin-top: 30px;

  ul {
   list-style: none;
   text-align: center;

   li {
    padding: 15px;
    border-radius: 30px;
   }

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

知識ポイント追加：
exact-active-classとactive-classの違い
router-linkはデフォルトでは、ルーティングがあいまい整合しています。例えば、現在の経路が/artile/1であれば、もアクティブになりますので、exact-active-classを設定した後、このrouter-linkは現在のルートが完全に整合されている場合にのみ、exact-active-clastをアクティブにします。<router-link to="/article" active-class="router-active"></router-link>ユーザがアクセス/articale/1するとアクティブになります。<a href="#/article" class="router-active" rel="nofollow"></a>使用時：<router-link to="/article" exact-active-class="router-active"></router-link>ユーザがアクセス/articale/1をすると、このlinkのクラスはアクティブになりません。<a href="#/article" rel="nofollow"></a>締め括りをつける
ここで、Vueの中でactiveをクリックして、最初のデフォルト選択機能の実現についての文章を紹介します。これに関連して、より多くのvueクリックactiveの内容を紹介します。以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。