样式图:
html:
class="Planning"
v-bind:class="{ updata_clable: IsIndex === index }"
@click="change(index)"
>{{ item.name }}
>
js:
export default {
data() {
return {
standing: [
{ name: "李现" },
{ name: "邓伦" },
{ name: "王俊凯" },
{ name: "千玺" }
],
IsIndex: 0
};
},
methods: {
change: function(index) {
this.IsIndex = index;
}
}
};
css:
.Planning {
font-size: 14px;
font-family: DengXian;
font-weight: bold;
line-height: 14px;
color: rgba(112, 112, 112, 1);
opacity: 1;
display: block;
text-align: center;
}
.Category {
width: 100%;
height: 40px;
margin-top: 10px;
}
.updata_clable {
color: #19874f;
}
v-bind就是用于绑定数据和元素属性的
标签:index,vue,name,color,height,点击,112,变色,font
来源: /lovebear123/p/12132898.html