解決vue點擊控制單個樣式的問題
更新時間：2018年09月05日 13:51:08 作者：qq_38146858
今天小編就為大家分享一篇解決vue點擊控制單個樣式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
既然是控制單個樣式，我們的html里面的內容一定是v-for=""；渲染出來，一定要養(yǎng)成一個好習慣，v-for="(item,index) in items";index就是我們所說的索引。
<div class="border" v-for="(item,index) in tolos" :key="index">
我做的項目類似于微信朋友圈，彈出贊與評論按鈕，點擊一個全體都會彈出；我們要解決的就是點一個只彈出對應的一個，對button按鈕對應其中的INDEX。
這個index對應著v-for中的index；
由于公司開發(fā)的后臺是c#必須用兩個@@來調用click事件，函數(shù)clickBt的函數(shù)內容是：
<div @@click="clickBt(index)" class="clickBt"><i class="fa fa-envelope fa-lg message"></i></div>
在data里面定義了activeindex
// clickBt: function (index) {
// var _this = this;
// console.log(111,index);
// _this.activeindex = index;
// _this.clickTf = !_this.clickTf;
// },
最后是在我們需要彈出的div里面寫v-class:與v-if相互調用：
<div class="clickDiv" v-bind:class="{'slide':clickTf}" v-if="index == activeindex">
不BB其他的哦，只希望以后遇到同樣的問題，能夠自己解決吧！
以上這篇解決vue點擊控制單個樣式的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue+echarts實現(xiàn)數(shù)據(jù)實時更新
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)數(shù)據(jù)實時更新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue中addEventListener()?監(jiān)聽事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解，包括語法講解和事件冒泡或事件捕獲的相關知識，本文結合示例代碼給大家講解的非常詳細,需要的朋友可以參考下2022-12-12
關于Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法
本文主要介紹了Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了基于el-tree實現(xiàn)懶加載穿梭條的示例代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要為大家詳細介紹了vue2手機APP項目添加開屏廣告或者閃屏廣告的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue的v-if里實現(xiàn)調用函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
VueJs監(jiān)聽window.resize方法示例
本篇文章主要介紹了VueJs監(jiān)聽window.resize方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了詳解vuex之store源碼簡單解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了Vue在啟動時卡住了,啟動不了的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了VUE Token的失效處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11