在jQuery中：

成都創(chuàng)新互聯公司咨詢熱線：13518219792，為您提供成都網站建設網頁設計及定制高端網站建設服務，成都創(chuàng)新互聯公司網頁制作領域十余年，包括玻璃鋼坐凳等多個方面擁有豐富設計經驗，選擇成都創(chuàng)新互聯公司，為網站保駕護航！

就是讓第一個選中，其他的不選中！

當點擊后當前選中，其他不選中。

有一種繞口令：東邊的喇嘛買了西邊的喇叭

o((⊙﹏⊙))o

在Vue中快速創(chuàng)建與選中

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: ['網易', '騰訊', '愛奇藝', '優(yōu)酷', '土豆', '斗魚'],
    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>

本文名稱：Vue中點擊active并第一個默認選中功能的實現-創(chuàng)新互聯
瀏覽地址：http://chinadenli.net/article26/dgpdjg.html

成都網站建設公司_創(chuàng)新互聯，為您提供動態(tài)網站、ChatGPT、軟件開發(fā)、網站設計、網站建設、品牌網站設計

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯