v-for中通過動態繫結class來實現觸發效果。
阿新 • • 發佈:2018-12-19
vue動態繫結class練習。
在v-for中:
:class=“{ ‘類名1’:條件表示式,‘類名2’:條件表示式… }”
<template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class="{'click':i==clickIndex}" ></li> </ul> </div> </template> <script> export default { data() { return { list: [1, 2, 3, 4], clickIndex: -1 }; }, methods: {} }; </script> <style scoped> .item { display: inline-block; width: 100px; height: 100px; cursor: pointer; border: 1px solid black; } .item:hover { background: gray; } .item.click { background: red; } </style>