Vue点击一组按钮中的某一个按钮并动态更改样式

Vue点击一组按钮中的某一个按钮并动态更改样式

首先v-for循环渲染出一组button，并添加相应的样式

html

<div id="app">
    <div class="div_class_buttonGroup">
        <div v-for="item in btns" class="div_class_defaultBtn"> {{item.name}}</div>
        </div>
    </div>
</div>

javascript

var vm = new Vue({
    el:'#app',
    data(){
        return{
            currentBtn:'按钮1',
            btns:{
                btn_1:{
                    name:'按钮1',
                    value:'one'
                },
                btn_2:{
                	name:'按钮2',
                	value:'two'
            	},
            	btn_3:{
                	name:'按钮3',
                    value:'three'
            	}
            }
        }
    }
})

css

*{
    margin: 0 0;
    padding: 0 0;
}
.div_class_buttonGroup{
    display: flex;
}
.div_class_defaultBtn{
    display: flex;
    width: 100px;
    height: 50px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin:0 1rem;
}
.div_class_defaultBtn:first-child{
    margin-left: 0rem;
}
.div_class_defaultBtn:last-child{
    margin-right: 0rem;
}
.active{
    background-color: aquamarine;
    color: #fff;
}

设置按钮1为默认按钮，并添加active 样式，则按钮1渲染的样式则为

<div class="div_class_defaultBtn active">按钮1</div>

相关代码

<div v-for="item in btns" class="div_class_defaultBtn" :class={active:currentBtn === item.name} > {{item.name}}</div>

或者

<div v-for="item in btns" class="div_class_defaultBtn" :class={active:getCurrentBtn(item.name)} > {{item.name}}</div>

以上代码中的getCurrentBtn方法可以是methods中的方法，也可以是computed中的计算属性

添加v-on:click方法修改currentBtn的值

()=>1，绑定active样式，使{active:item.name === currentBtn}

这样做是最方便的，当点击修改currentBtn的值，currentBtn的值修改之后，那么active的样式就会加载到item.name = currentBtn中

<div v-for="item in btns" class="div_class_defaultBtn" :class={active:currentBtn === item.name} @click="currentBtn = item.name"> {{item.name}}</div>

()=>2，绑定active样式，使{active:getCurrentBtn(item.name)}

其中getCurrentBtn为一个方法，传入的item.name === this.currentBtn 为true时，则返回true，表示当前选中的按钮加载active样式

<div v-for="item in btns" class="div_class_defaultBtn" :class={active:getCurrentBtn(item.name)} @click="currentBtn = item.name"> {{item.name}}</div>

methods:{
    getCurrentBtn(data){
        return this.currentBtn === data
    }
}

其实这两种方法其实是一样的，只是在加载样式的时候换了一种写法而已，第一种是直接在绑定属性里通过计算item.name === currentBtn是否为true,为true则加载active样式，第二种写法是方法，在方法里判断之后再返回

()=>3，通过computed计算属性，判断是否相等

<div v-for="item in btns" class="div_class_defaultBtn" :class={active:getCurrentBtn(item.name)} @click="currentBtn = item.name"> {{item.name}}</div>

computed:{
    getCurrentBtn(){
        return function(data){
            return this.currentBtn === data
        }
    }
}

计算属性要传递参数，在当前函数中，必须要加一层闭包，在闭包中接受参数

Vue的计算属性不带参数的写法如下

在html中

<!--1111-->
{{test}}

在computed对象中

computed:{
    test(){
        return `1111` 
    }
}

可想Vue在处理该属性的时候，会以{{test()}}这样计算出结果，而我们需要传入参数，vue以{{test()(params)}}这种形式渲染，所以我们需要一个函数闭包，在{{test}}中返回一个function，再通过这个function(params)将参数传递进计算属性中

所以我们在传递参数的时候在闭包中接受参数，闭包中的this要视情况而定

而我们在不使用箭头函数的写法的时候，this指向的是当前的vue实例，所以可以使用 return this.currentBtn === data,当前this.currentBtn 就是在data中定义的currentBtn

computed:{
    getCurrentBtn(){
        return data => this.currentBtn === data
    }
}

如果闭包使用箭头函数，箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。所以在箭头函数中的this则是定义函数时绑定的，则为当前vue的实例。

如果getCurrentBtn为箭头函数呢？

computed:{
    getCurrentBtn:self => data => self.currentBtn === data
}

我们可以知道，这个self 肯定是指向vue实例的，原因在于当我们在调用getCurrentBtn(self)(data)时，此时已经将vue实例传入至self中，以解决外层为箭头函数，闭包为箭头函数，闭包中的this为window