解決vue點(diǎn)擊控制單個(gè)樣式的問題
既然是控制單個(gè)樣式，我們的html里面的內(nèi)容一定是v-for=""；渲染出來，一定要養(yǎng)成一個(gè)好習(xí)慣，v-for="(item,index) in items";index就是我們所說的索引。
<div class="border" v-for="(item,index) in tolos" :key="index">
我做的項(xiàng)目類似于微信朋友圈，彈出贊與評(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；
由于公司開發(fā)的后臺(tái)是c#必須用兩個(gè)@@來調(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里面寫v-class:與v-if相互調(diào)用：
<div class="clickDiv" v-bind:class="{'slide':clickTf}" v-if="index == activeindex">
不BB其他的哦，只希望以后遇到同樣的問題，能夠自己解決吧！
以上這篇解決vue點(diǎn)擊控制單個(gè)樣式的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?vite配置css?的sourceMap及文件引用配置別名的過程
這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過程，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)
這篇文章主要為大家詳細(xì)介紹了Vue入門實(shí)戰(zhàn)之天氣預(yù)報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
基于Vue2x實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能
本文講述的是從開發(fā)一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件的一個(gè)全過程，包含發(fā)布到npm，構(gòu)建自己的npm包，供下載安裝使用的技巧,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
解決vue create 創(chuàng)建項(xiàng)目只有兩個(gè)文件問題
這篇文章主要介紹了解決vue create 創(chuàng)建項(xiàng)目只有兩個(gè)文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表固定列滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了vue.js組件化開發(fā)實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了Vuex中的Mutation使用詳解,當(dāng)我們想修改狀態(tài)值,想傳入的值進(jìn)而進(jìn)行修改時(shí),你可以向 store.commit 傳入額外的參數(shù),即 mutation 的 載荷,需要的朋友可以參考下2023-11-11
vue打印插件vue-print-nb的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue打印插件vue-print-nb的實(shí)現(xiàn),需要引入插件npm install vue-print-nb --save，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01