vue动态绑定class练习。
:class=“{ ‘类名1':条件表达式,‘类名2':条件表达式… }”
v-for="(item,i) of list"
:key="i"
class="item"
@click="clickIndex=i"
:class="{'click':i==clickIndex}"
>
export default {
data() {
return {
list: [1, 2, 3, 4],
clickIndex: -1
};
},
methods: {}
};
.item {
display: inline-block;
width: 100px;
height: 100px;
cursor: pointer;
border: 1px solid black;
}
.item:hover {
background: gray;
}
.item.click {
background: red;
}
补充:vue之v-for中给每个item动态绑定class,动态添加元素,动态删除某个元