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>

*