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

最后

以上就是无心豆芽为你收集整理的Vue点击一组按钮中的某一个按钮并动态更改样式的全部内容，希望文章能够帮你解决Vue点击一组按钮中的某一个按钮并动态更改样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。