vue.js实现点击div标签时改变样式
目录
1.点击某一项后样式发生改变(循环列表的每一项的样式改变)
2.切换样式应该是v-bind很常用的功能(单标签样式的改变)
3.实现联动（完整代码）
1.点击某一项后样式发生改变(循环列表的每一项的样式改变)效果图
v-for循环展示productType中的数据
：class动态绑定样式表中.changeStyle的样式，将当前索引传递给changeSelectStyle
@click点击事件触发函数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')
原图及点击后效果
效果如下：
默认状态，循环列表的每一项都没有被选中。 选中后其中某一项 全部取消， 选中全部，其他项取消选中。
html部分
<template>
<div class="fliter-container">
<div class="top">
<span class="back-icon" @click="back()"/>
<p class="title">产品筛选</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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
