快捷導(dǎo)航

用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果

更新時間：2018年04月12日 16:14:46 作者：明明一顆大白菜

這篇文章主要介紹了用vue2.0實現(xiàn)點擊選中active其他選項互斥的效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在正常的js中。我們?nèi)绻獙崿F(xiàn)點擊選中active然后其他取消的效果，我們可以定義一個類，當(dāng)點擊的時候給給多有的dom取消active的類，給當(dāng)前元素加上這個類名，說的很啰嗦，直接來看代碼說話吧（表示樓主用的是jq）:

 <style>
  * {
   margin: 0;
   padding: 0;
  }

  li {
   list-style: none;
   width: 100px;
   margin-top: 10px;
   border: 1px solid red;
  }

  li:active {
   cursor: pointer;
  }

  .active {
   background-color: aqua;
  }
 </style>
 <script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
</head>
<body>
<ul>
 <li>this is pne</li>
 <li>this is two</li>
 <li>this is three</li>
</ul>
</body>
<script>
 $(() => {
  $("li").click((e) => {
   $("li").removeClass("active");
   $(e.target).addClass("active");
  })
 })
</script>

效果如下圖所示：

但是在vue里面，是不提倡進(jìn)行dom操作的，如果非進(jìn)行dom的話，vue2.0里面有一個ref的屬性，是可以達(dá)到dom的效果的。那么接下來我們不接住dom來進(jìn)行操作：

由于習(xí)慣了webpack和vue-cli腳手架，所以樓主所有vue的代碼都是放在webpack的腳手架當(dāng)中進(jìn)行，還使用了pug和scss的預(yù)處理器，vue的代碼如下：

<template lang="pug">
 ul
  li(v-for="(item,index) in classArr", @click="result(index)", :class="resultNum === index?'active':''") this is {{item}}
</template>
<style lang="scss">
 li {
  list-style: none;
  width: 100px;
  margin-top: 10px;
  border: 1px solid red;
  &:hover {
   cursor: pointer;
  }
 }
 .active{
  background-color: aqua;
 }
</style>
<script>
 export default{
  data(){
   return {
    classArr: ["one", "two", "three"],
    num:"",
   }
  },
  methods: {
    result(index){
     this.num = index;
    }
  },
  computed:{
    resultNum(){
     return this.num;
   }
  }
 }
</script>

思路如下：

這段代碼使用的是index這個關(guān)鍵字，還使用了computed這個計算屬性，當(dāng)當(dāng)前的index索引與點擊的當(dāng)前元素的下標(biāo)相同的時候，便會觸發(fā)active這個類名。說的很簡練，不懂的可以加博主一起探討

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue2.0 實現(xiàn)單選互斥的方法

相關(guān)文章

vue實現(xiàn)背景圖片鋪滿整個屏幕(適配所有機(jī)型)
在網(wǎng)頁設(shè)計中,背景全屏是一種常見的視覺效果,通過正確的CSS樣式設(shè)置,可以實現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過滾動條查看剩余內(nèi)容,這種設(shè)計可以提升用戶的瀏覽體驗,使網(wǎng)頁看起來更加整潔和專業(yè)
2024-10-10
vue項目中用cdn優(yōu)化的方法
本篇文章主要介紹了vue項目中用cdn優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
vue項目中自動導(dǎo)入svg并愉快的使用方式
這篇文章主要介紹了vue項目中自動導(dǎo)入svg并愉快的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-11-11
Vue2(三)實現(xiàn)子菜單展開收縮，帶動畫效果實現(xiàn)方法
這篇文章主要介紹了vue實現(xiàn)收縮展開效果的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue項目啟動報錯解決方法大全
這篇文章主要給大家介紹了關(guān)于Vue項目啟動報錯解決方法的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
2023-07-07
vue項目使用node連接數(shù)據(jù)庫的方法(前后端分離)
這篇文章主要介紹了vue項目使用node連接數(shù)據(jù)庫（前后端分離），本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-12-12
vue3手動封裝彈出框組件message的方法
這篇文章主要為大家詳細(xì)介紹了vue3手動封裝彈出框組件message的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue項目實現(xiàn)按鈕可隨意移動
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)按鈕可隨意移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue.directive 自定義指令的問題小結(jié)
這篇文章主要介紹了Vue.directive 自定義指令的問題小結(jié),需要的朋友可以參考下
2018-03-03
前端通過vue調(diào)用后端接口導(dǎo)出excel表格基本步驟
在Vue前端項目中,可通過axios庫發(fā)送請求至后端獲取Excel下載鏈接,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-10-10