vue动态类名实例--Button点击高亮

1.动态绑定class类名

<div v-bind:class='box1'></div>

动态绑定class类名有两种语法:
一个是对象语法： :class=’{key:value}’
key代表的就是 类名,value控制key是否要被添加，如果返回true则添加，否则不添加
一个是数组语法：:class=’[“box3”,{“box4”:1>2}]’

原理：在data中定义个初始值为零（或者为空都可以），通过v-for循环知道每个button的index，设置@click，把点击对应的index给刚在在data中定义的为0的那个值，在:class中的value进行判断是否为true。

1.button的名字是遍历上去的
下面是完整的代码块

<template>
<div id="app">
<button
v-for="(item,index) of arr"
:key="index"
@click="Indexx(index)"
class="CColor"
:class="{' ColorChang':num==index}"
>{{item.name}}</button>
</div>
</template>
<script>
export default{
name:'About',
data(){
return{
num:0,
arr:[
{name:"我的"},
{name:"你的"},
{name:"他的"}
]
}
},
methods:{
Indexx(index){
this.num= index;
}
}
}
</script>
<style>
.CColor{
color: darkcyan;
}
.ColorChang{
color: crimson;
}
</style>

2.button的名字是单独的
下面是完整的代码块

<template>
<div>
<button class="CClass" :class="{'Cclass':num==1}" @click="Cclick(1)">按钮1</button>
<button class="CClass" :class="{'Cclass':num==2}" @click="Cclick(2)">按钮2</button>
<button class="CClass" :class="{'Cclass':num==3}" @click="Cclick(3)">按钮3</button>
<button class="CClass" :class="{'Cclass':num==4}" @click="Cclick(4)">按钮4</button>
</div>
</template>
<script>
export default {
data(){
return{
num:0
}
},
methods:{
Cclick(index){
//
把Cclick函数传的参数给对应的num
this.num=index
}
},
mounted(){
}
}
</script>
<style>
/* 本身样式 */
.CClass{
color: rgb(248, 248, 248);
background-color: darkorange;
border: 2px solid rgb(194, 110, 8);
margin-left: 8px;
}
/* 动态类名点击样式 */
.Cclass{
color: rgb(247, 247, 247);
background-color: cornflowerblue;
border: 2px solid rgb(68, 106, 177);
}
/* hover时的样式 */
.CClass:hover{
color: brown;
}
</style>

最后

以上就是温婉保温杯为你收集整理的vue动态类名实例--Button点击高亮的全部内容，希望文章能够帮你解决vue动态类名实例--Button点击高亮所遇到的程序开发问题。

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