vue2.0操作active其他選項互斥

這次帶給大家vue2.0操作active其他選項互斥，vue2.0操作active其他選項互斥的注意事項有哪些，下面就是實戰案例，一起來看一下。 z

在正常的js中。我們如果要實現點擊選中active然後其他取消的效果，我們可以定義一個類，當點擊的時候給給多有的dom取消active的類，給當前元素加上這個類名，說的很囉嗦，直接來看程式碼說話吧（表示樓主用的是jq）:

 
 



 
this is pne
 
this is two
 
this is three

效果如下圖所示：

但是在vue裡面，是不提倡進行dom操作的，如果非進行dom的話，vue2.0裡面有一個ref的屬性，是可以達到dom的效果的。那麼接下來我們不接住dom來進行操作：

由於習慣了webpack和vue-cli腳手架，所以樓主所有vue的程式碼都是放在webpack的腳手架當中進行，還使用了pug和scss的預處理器，vue的程式碼如下：

想法如下：

這段程式碼使用的是index這個關鍵字，還使用了computed這個計算屬性，噹噹前的index索引與點擊的當前元素的下標相同的時候，便會觸發active這個類別名稱。說的很簡練，不懂的可以加博主一起探討

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue-cropper對圖片進行裁切

使用Element-UI Table實作拖曳功能

以上是vue2.0操作active其他選項互斥的詳細內容。更多資訊請關注PHP中文網其他相關文章！