vue.js 實現(xiàn)點擊div標簽時改變樣式
1.點擊某一項后樣式發(fā)生改變(循環(huán)列表的每一項的樣式改變)
效果圖
v-for循環(huán)展示productType中的數(shù)據(jù)
:class動態(tài)綁定樣式表中.changeStyle的樣式,將當前索引傳遞給changeSelectStyle
@click點擊事件觸發(fā)函數(shù)changeStyle(),并將當前索引傳遞進去。
<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的值為當前索引的值
changeStyle:function(index){ this.changeSelectStyle = index; },
2.切換樣式應該是v-bind很常用的功能(單標簽樣式的改變)
<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 }
點擊后改變文字顏色和圖標
.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')
原圖及點擊后效果
3.實現(xiàn)聯(lián)動(完整代碼)
效果如下:
默認狀態(tài),循環(huán)列表的每一項都沒有被選中。 選中后其中某一項 全部取消, 選中全部,其他項取消選中。
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>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中改變選中當前項的顯示隱藏或者狀態(tài)的實現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當前項的顯示隱藏或者狀態(tài)的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02vue使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF
這篇文章主要為大家詳細介紹了vue如何使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學習一下2023-08-08Vue?使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制
個人在做文件上傳功能的時候,踩過不少的坑,特在此記錄下,本文介紹Vue使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制問題,感興趣的朋友一起看看吧2024-02-02vue+tsc+noEmit導致打包報TS類型錯誤問題及解決方法
當我們新建vue3項目,package.json文件會自動給我添加一些配置選項,這寫選項基本沒有問題,但是在實際操作過程中,當項目越來越復雜就會出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導致打包報TS類型錯誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10