VUE实现点击DIV背景换色
VUE实现DIV点击换色
这个方法初衷是为了代替button做一个更加自由添加图标标题之类的按钮来代替tab页签,所以后续还可以绑定一些自己的事件,如跳转页面,窗口弹出.
先写DIV和CSS样式.
<template>
<div>
<div class="main-div" :style="getStyle(item)" v-for="(item,index) in list" @click="activeBtn(item)">
{{item.title}}
</div>
</div>
</template>
用v-bind绑定换色方法,v-for循环数组,v-on绑定点击事件.
<style scoped>
.main-div{
width: 100px;height: 100px;border:1px solid red
}
</style>```
定义数组对象,设定内容title的值,再给数组加上一个默认值false,用来判断div的状态.
export default {
name: "click",
data(){
return{
list:[{title:'标题一',isActive:false},{title:'标题二',isActive:false},{title:'标题三',isActive:false}]
}
}
接下来写方法,getStyle通过获取我们赋给isActive的值来判断,为true就将背景颜色更换.
activeBtn就是为了改变isActive值写的一个点击事件,用let声明currentState变量(let命令所在的代码块内有效),获取isActive的值,再写一个forEach遍历数组,将数组的isActive值全部赋成false,这一步是为了点击时将所有的模块先重置成初始状态(颜色),之后再用item.isActive = !currentState将点击的div isActive的值取反实现换色.
methods:{
getStyle(item){
if(item.isActive){
return {'background-color':'green'}
}
return {}
},
activeBtn(item){
let currentState = item.isActive;
this.list.forEach(el=>{
el.isActive= false
})
item.isActive = !currentState
}
}
}
效果图:
完整代码:
<template>
<div>
<div class="main-div" :style="getStyle(item)" v-for="(item,index) in list" @click="activeBtn(item)">
{{item.title}}
</div>
</div>
</template>
<script>
export default {
name: "click",
data(){
return{
list:[{title:'标题一',isActive:false},{title:'标题二',isActive:false},{title:'标题三',isActive:false}]
}
},
methods:{
getStyle(item){
if(item.isActive){
return {'background-color':'green'}
}
return {}
},
activeBtn(item){
let currentState = item.isActive;
this.list.forEach(el=>{
el.isActive= false
})
item.isActive = !currentState
}
}
}
</script>
<style scoped>
.main-div{
width: 100px;height: 100px;border:1px solid red
}
</style>