实现效果:点击到哪里哪里会显示.active里的样式
html部分
<div class="type_item"
:class="{ active:index==typeActive }" v-for="(item, index) in itemList"
@click="changeTypeColor(index)">{
{item.text}}</div>
js
data() {
return {
typeActive: false,
itemList: [
{
text: '111' },
{
text: '222' },
{
text: '333' },
{
text: '444' }
]
};
},
methods: {
changeTypeColor: function (index) {
this.typeActive = index;
},
},
css部分样式随意
.active {
width: 100%;
height: 50%;
background-color: #ddd;
font-size: 10px;
line-height: 30px;
cursor: pointer;
}