解決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事件，函數clickBt的函數內容是：
<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點擊控制單個樣式的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue3?vite配置css?的sourceMap及文件引用配置別名的過程
這篇文章主要介紹了Vue3 vite配置css的sourceMap,及文件引用配置別名的過程，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue入門實戰(zhàn)之天氣預報，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
基于Vue2x實現響應式自適應輪播組件插件VueSliderShow功能
本文講述的是從開發(fā)一款基于Vue2x的響應式自適應輪播組件插件的一個全過程，包含發(fā)布到npm，構建自己的npm包，供下載安裝使用的技巧,非常不錯，具有一定的參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
解決vue create 創(chuàng)建項目只有兩個文件問題
這篇文章主要介紹了解決vue create 創(chuàng)建項目只有兩個文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要為大家詳細介紹了vue實現列表固定列滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了vue實現調取手機攝像頭和相冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了vue.js組件化開發(fā)實踐，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了Vuex中的Mutation使用詳解,當我們想修改狀態(tài)值,想傳入的值進而進行修改時,你可以向 store.commit 傳入額外的參數,即 mutation 的 載荷,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue打印插件vue-print-nb的實現,需要引入插件npm install vue-print-nb --save，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vuex的幾個屬性及其使用傳參,本文結合實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01