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