快捷導(dǎo)航

vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)

更新時(shí)間：2020年09月10日 08:34:23 作者：Archer_yy

這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

沒有展開時(shí)

點(diǎn)擊展開之后

<div class="flashread_item_box_time">
      <span class="moment_time">9分鐘前</span>
      <div class="flashread_item_box_zan">
       <span class="flashread_item_box_item"><i class="iconfont icon-changyongtubiao-mianxing-"></i>10</span>
       <span class="flashread_item_box_item" @click="tocomment(index)"><i class="iconfont icon-pinglun" :class="{showcolor:currentTab==index}"></i>10</span>
      </div>
     </div>
     <div class="comment_textareabox" :class="{'showcomment':currentTab==index}">
      <div class="textarea_com">
       <textarea placeholder="你來談?wù)劊? class="comment_textarea" v-on:input="change" v-model="comment"></textarea>
       <button class="btn_comment" :class="{'showcolor':showcombtn}">發(fā)表</button>
      </div>
     </div>

data(){
  return{
   currentTab:-1,
   flashreadlists:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
   showcombtn:false,
   comment:''
  }
 },
 methods:{
  change(){
   if(this.comment.length>=1){
    this.showcombtn=true
   }else{
    this.showcombtn=false
   }
  },
  tocomment(index){
   if(index!=this.currentTab){
    this.currentTab = index;

   }else{
    this.currentTab = -1;

   }
  }
 }

補(bǔ)充知識(shí)：vue 循環(huán)多個(gè)標(biāo)簽，點(diǎn)擊標(biāo)簽變色，再點(diǎn)擊取消，可以同時(shí)點(diǎn)擊多個(gè)

效果如下：

1.

<div class="relFacilityTitcon"> 
      <i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i>
</div>

2.

.padding .relWarp .relFacility .relFacilityTitcon {
 
    /* border: 1px solid red; */
    /* line-height: 20px; */
    padding: 0 .24rem;
    font-size :10px;
  }
 
  .padding .relWarp .relFacility .relFacilityTitcon i {
    
    /* height:20px; */
    display: inline-block;
    /* margin: 0 5px; */
    height: 20px;
    line-height: 20px;
    padding: 0 .16rem;
    /* width: auto; */
    font-size: 10px;
    color: #97979f;
    border-radius: 5px;
    border: 1px solid #97979f;
    margin-right: 10px;
    margin-top: 10px;
    font-style: normal;
 
    /* padding:1px 7px; */
    /* display: inline-block; */
  }
  .padding .relWarp .relFacility .relFacilityTitcon .bgcolor {
    border: 1px solid orange;
    color: orange;
  }
 
  .padding .relWarp .relFacility .relFacilityTitcon i:last-child {
    margin-right: 0;
  }

3.

 methods: {
      
      changeSpan(index){
        let arrIndex = this.spanIndex.indexOf(index);
        // console.log(arrIndex);
        
        if(arrIndex>-1){
          this.spanIndex.splice(arrIndex,1);
        }else{
          this.spanIndex.push(index);
        }
      },

以上這篇vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue.js 開發(fā)環(huán)境搭建最簡單攻略
本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡單攻略，這里整理了詳細(xì)的步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn)
這篇文章主要為大家詳細(xì)介紹了vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Vue實(shí)現(xiàn)父子組件的事件傳遞的示例代碼
在Vue.js這個(gè)現(xiàn)代化的前端框架中,組件化是其核心理念之一,正確的組件間通信是實(shí)現(xiàn)高效和可維護(hù)代碼的關(guān)鍵,在許多應(yīng)用程序中,父子組件之間的事件傳遞是一個(gè)常見的需求,,本文將深入探討在Vue中如何實(shí)現(xiàn)父子組件的事件傳遞,并輔以示例代碼來展示這些概念
2025-01-01
vue簡單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue簡單練習(xí) 桌面時(shí)鐘的實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值的相關(guān)資料,需要的朋友可以參考下
2019-09-09
vue中使用webuploader做斷點(diǎn)續(xù)傳實(shí)現(xiàn)文件上傳功能
之前做的一個(gè)項(xiàng)目中，由于經(jīng)常上傳幾百兆的壓縮包，導(dǎo)致經(jīng)常上傳失敗，所以就找了webuploader插件做了斷點(diǎn)續(xù)傳,斷點(diǎn)續(xù)傳除了需要前端分片，也需要后臺(tái)去支持，所以做的時(shí)候做好對(duì)接協(xié)調(diào),所以本文就給大家詳細(xì)的介紹一下vue中如何使用webuploader做斷點(diǎn)續(xù)傳
2023-07-07
vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue2中l(wèi)ess的安裝以及使用教程
less是css預(yù)處理器,對(duì)原先css進(jìn)行了擴(kuò)展和補(bǔ)充,下面這篇文章主要給大家介紹了關(guān)于vue2中l(wèi)ess的安裝以及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法
這篇文章主要介紹了Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
示例解析Ant?Design?Vue組件slots作用
這篇文章主要為大家通過示例解析Ant?Design?Vue組件slots作用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05