vue.js 實(shí)現(xiàn)點(diǎn)擊div標(biāo)簽時(shí)改變樣式

更新時(shí)間：2022年08月15日 09:34:05 作者：吳小花的博客

這篇文章主要介紹了vue.js 實(shí)現(xiàn)點(diǎn)擊div標(biāo)簽時(shí)改變樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1.點(diǎn)擊某一項(xiàng)后樣式發(fā)生改變(循環(huán)列表的每一項(xiàng)的樣式改變)

效果圖

v-for循環(huán)展示productType中的數(shù)據(jù)

：class動(dòng)態(tài)綁定樣式表中.changeStyle的樣式，將當(dāng)前索引傳遞給changeSelectStyle

@click點(diǎn)擊事件觸發(fā)函數(shù)changeStyle(),并將當(dāng)前索引傳遞進(jìn)去。

<ul v-for="(item,index) in productType" :key="index">
   <li  class="type-name" :class="{changeStyle:changeSelectStyle == index}" 
                         @click="changeStyle(index)" >{{item.name}}</li>
</ul>

 data(){
    return{
      changeSelectStyle:'',
      productType:[
        {"name":"APE1"},
        {"name":"APE2"},
        {"name":"APE3"},
        {"name":"APE4"},
      ]
  }
}

樣式表：

.type-name
    height 38px
    text-align center
    line-height 38px 
.changeStyle
    color #0099cc
    background-color #fff

changeStyle方法：

讓changeSelectStyle的值為當(dāng)前索引的值

    changeStyle:function(index){
      this.changeSelectStyle = index;
    },

2.切換樣式應(yīng)該是v-bind很常用的功能(單標(biāo)簽樣式的改變)

 <div class="selectAll" :class="{selectAll: !isshow,changeSelectAll: isshow}" @click="isshow=!isshow">
          <div class="text-header">全部</div>
          <div class="sel-icon"></div>
</div>

 data(){
    return{
      isshow: true
}

點(diǎn)擊后改變文字顏色和圖標(biāo)

.selectAll 
    flex 0 0 37px 
    display flex   
  .text-header
    padding-left 23px 
    flex 0 0 240px 
    border-left 1px solid #0099cc
    border-bottom 1px solid #f7f7f7
    letter-spacing 2px
    line-height 37px 
  .sel-icon
    flex 1
    bg-image('../images/select-icon2')
    background-repeat no-repeat 
    background-size 16px 16px
    width 16px 
    height 16px 
    align-self center
.changeSelectAll
    color #0099cc 
   .sel-icon
    bg-image('../images/select-icon1')

原圖及點(diǎn)擊后效果

3.實(shí)現(xiàn)聯(lián)動(dòng)（完整代碼）

效果如下：

默認(rèn)狀態(tài)，循環(huán)列表的每一項(xiàng)都沒有被選中。選中后其中某一項(xiàng) 全部取消，選中全部，其他項(xiàng)取消選中。

html部分

<template>
 <div class="fliter-container">
   <div class="top">
     <span class="back-icon" @click="back()"/>
     <p class="title">產(chǎn)品篩選</p>
   </div>
   <div class="content">
      <div class="left">
        <ul v-for="(item,index) in productType" :key="index">
          <li  class="type-name" :class="{changeStyle:changeSelectStyle == index}" @click="changeStyle(index)" >{{item.name}}</li>
        </ul>
      </div>
      <div class="right">
        <div class="selectAll" :class="{selectAll: !isshow,changeSelectAll: isshow}" @click="isshow=!isshow">
          <div class="text-header">全部</div>
          <div class="sel-icon"></div>
        </div>
        <div class="select-detail" >
            <div class="selectItem" v-for="(item,index) in nameoptions" :key="index" :class="{changeSelectItem:changeSelectIndex == index&&!isshow}" @click="changeItem(index)" > 
              <div class="text">{{item.name}}</div>
              <div class="sel-icon"></div>
            </div>       
        </div>
        <div class="bottom">
          <button class="confirm" >確定</button>
        </div>
      </div>
   </div>
   
 </div>
  
</template>

<script>
export default {
  data(){
    return{
      isshow: true,
      changeSelectStyle:'',
      changeSelectIndex:'',
      productType:[
        {"name":"APE1"},
        {"name":"APE2"},
        {"name":"APE3"},
        {"name":"APE4"},
      ],
      nameoptions:[
        {"name":"HiLight照明燈車全系列1"},   
        {"name":"HiLight照明燈車全系列2"},
        {"name":"HiLight照明燈車全系列3"},
        {"name":"HiLight照明燈車全系列4"},
        {"name":"HiLight照明燈車全系列5"},
        {"name":"HiLight照明燈車全系列6"},
        {"name":"HiLight照明燈車全系列7"},
        {"name":"HiLight照明燈車全系列1"},
        {"name":"HiLight照明燈車全系列1"},
        {"name":"HiLight照明燈車全系列1"},
        {"name":"HiLight照明燈車全系列1"},
        {"name":"HiLight照明燈車全系列1"},   
        {"name":"HiLight照明燈車全系列2"},
        {"name":"HiLight照明燈車全系列3"},
        {"name":"HiLight照明燈車全系列4"},
        {"name":"HiLight照明燈車全系列5"},
        {"name":"HiLight照明燈車全系列6"},
        {"name":"HiLight照明燈車全系列7"},
        {"name":"HiLight照明燈車全系列1"},
        {"name":"HiLight照明燈車全系列1"},
        {"name":"HiLight照明燈車全系列1"},
        {"name":"HiLight照明燈車全系列1"},             
        ]
    }
  },
  methods:{
    // 改變分類名的樣式
    changeStyle:function(index){
      this.changeSelectStyle = index;
    },
    // 改變分類詳情樣式
    changeItem(index){
      this.isshowItem != this.isshowItem;
      this.isshow = false
      this.changeSelectIndex = index;
    },
    back(){
      this.$router.push({name:"product"})
    }
  }
  
}
</script>

 
<style lang="stylus" scoped>
@import '~common/stylus/mixin'
@import '~common/stylus/variable'
  .fliter-container
     width 100%
     height 100%
     display flex
     flex-direction column
     .top 
       flex 0 0 40px
       display flex
       background-color #0099cc
       color #fff
       .back-icon
         bg-image('../images/back-icon')
         background-size 19px 15px 
         background-repeat no-repeat
         flex 0 0 19px 
         margin 13px 0 0 15px
       .title
         flex 1
         align-self center
         margin-left 120px
         letter-spacing 3px
     .content 
       flex 1
       display flex
       .left 
         font-size 13px
         flex 0 0 78px
         letter-spacing 1px 
         background-color #f7f7f7
         .type-name
           height 38px
           text-align center
           line-height 38px 
         .changeStyle
           color #0099cc
           background-color #fff
       .right 
         flex 1
         overflow hidden
         font-size 13px
         display flex
         flex-direction column     
         .selectAll 
           flex 0 0 37px 
           display flex   
           .text-header
             padding-left 23px 
             flex 0 0 240px 
             border-left 1px solid #0099cc
             border-bottom 1px solid #f7f7f7
             letter-spacing 2px
             line-height 37px 
           .sel-icon
             flex 1
             bg-image('../images/select-icon2')
             background-repeat no-repeat 
             background-size 16px 16px
             width 16px 
             height 16px 
             align-self center
          .changeSelectAll
            color #0099cc 
            .sel-icon
              bg-image('../images/select-icon1')
         .select-detail
           flex 1
           overflow auto
           .selectItem
             height 37px
             display flex
             .text
              flex 0 0 240px 
              margin-left 23px 
              letter-spacing 1px
              line-height 37px 
              border-bottom 1px solid #f7f7f7
             .sel-icon
              flex 1
              bg-image('../images/select-icon2')
              background-repeat no-repeat 
              background-size 16px 16px
              width 16px 
              height 16px 
              align-self center
           .changeSelectItem
             color #0099cc
             .sel-icon
              bg-image('../images/select-icon1')
         .bottom
            flex 0 0 50px 
            width 100%
            display flex
            .confirm 
              background-color #0099cc
              width 124px    
              height 26px 
              color #fff
              letter-spacing 2px
              align-self center
              margin-left 20%
              border none
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: