vue.js 實(shí)現(xiàn)點(diǎn)擊div標(biāo)簽時(shí)改變樣式
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)都沒(méi)有被選中。 選中后其中某一項(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照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列2"}, {"name":"HiLight照明燈車(chē)全系列3"}, {"name":"HiLight照明燈車(chē)全系列4"}, {"name":"HiLight照明燈車(chē)全系列5"}, {"name":"HiLight照明燈車(chē)全系列6"}, {"name":"HiLight照明燈車(chē)全系列7"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列2"}, {"name":"HiLight照明燈車(chē)全系列3"}, {"name":"HiLight照明燈車(chē)全系列4"}, {"name":"HiLight照明燈車(chē)全系列5"}, {"name":"HiLight照明燈車(chē)全系列6"}, {"name":"HiLight照明燈車(chē)全系列7"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列1"}, {"name":"HiLight照明燈車(chē)全系列1"}, ] } }, methods:{ // 改變分類(lèi)名的樣式 changeStyle:function(index){ this.changeSelectStyle = index; }, // 改變分類(lèi)詳情樣式 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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02vue使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF
這篇文章主要為大家詳細(xì)介紹了vue如何使用html2canvas實(shí)現(xiàn)將DOM節(jié)點(diǎn)生成對(duì)應(yīng)的PDF,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以學(xué)習(xí)一下2023-08-08Vue?使用?ElementUi?el-upload?手動(dòng)上傳文件限制上傳文件類(lèi)型大小同名等進(jìn)行限制
個(gè)人在做文件上傳功能的時(shí)候,踩過(guò)不少的坑,特在此記錄下,本文介紹Vue使用?ElementUi?el-upload?手動(dòng)上傳文件限制上傳文件類(lèi)型大小同名等進(jìn)行限制問(wèn)題,感興趣的朋友一起看看吧2024-02-02vue+tsc+noEmit導(dǎo)致打包報(bào)TS類(lèi)型錯(cuò)誤問(wèn)題及解決方法
當(dāng)我們新建vue3項(xiàng)目,package.json文件會(huì)自動(dòng)給我添加一些配置選項(xiàng),這寫(xiě)選項(xiàng)基本沒(méi)有問(wèn)題,但是在實(shí)際操作過(guò)程中,當(dāng)項(xiàng)目越來(lái)越復(fù)雜就會(huì)出現(xiàn)問(wèn)題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報(bào)TS類(lèi)型錯(cuò)誤問(wèn)題及解決方法,感興趣的朋友一起看看吧2023-10-10vue.js國(guó)際化 vue-i18n插件的使用詳解
本篇文章主要介紹了vue.js國(guó)際化 vue-i18n插件的使用詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解
這篇文章主要介紹了使用Vue開(kāi)發(fā)自己的Chrome擴(kuò)展程序過(guò)程詳解,瀏覽器擴(kuò)展程序是可以修改和增強(qiáng) Web 瀏覽器功能的小程序。它們可用于各種任務(wù),例如阻止廣告,管理密碼,組織標(biāo)簽,改變網(wǎng)頁(yè)的外觀和行為等等。,需要的朋友可以參考下2019-06-06