如何解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題

這篇文章給大家分享的是有關(guān)如何解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

既然是控制單個(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)目類似于微信朋友圈，彈出贊與評(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里面寫v-class:與v-if相互調(diào)用：

<div class="clickDiv" v-bind:class="{'slide':clickTf}" v-if="index == activeindex">

不BB其他的哦，只希望以后遇到同樣的問(wèn)題，能夠自己解決吧！

感謝各位的閱讀！關(guān)于“如何解決vue點(diǎn)擊控制單個(gè)樣式的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！