![]()
在 Vue 中实现动态绑定 toggle action
在遍历li标签时, 动态绑定点击事件, 当点击其中一个item时调用函数. 函数内判断是否处于action状态, 是则清除 class, 从实现 toggle 的效果~ 按照这个思路也可以扩展为下拉菜单.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <template>
<div class="hello">
<ul class="list">
<li
v-for="(item, index) in itemList"
@click="openItem(index)"
:key="item.id"
>
{{ item.desc }}
<span class="icon" :class="{ action: actionItem === index }"></span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
itemList: [{ desc: 'item1' }, { desc: 'item2' }, { desc: 'item3' }],
actionItem: null
};
},
methods: {
openItem(index) {
if (this.actionItem === index) {
this.actionItem = null;
} else {
this.actionItem = index;
}
}
}
};
</script>
<style scoped>
.list {
width: 500px;
padding: 0;
margin: 0 auto;
text-align: left;
}
.list li {
position: relative;
margin: 14px 0;
padding: 10px;
border-bottom: 1px solid #ccc;
list-style: none;
cursor: pointer;
}
.list .icon {
position: absolute;
right: 10px;
width: 0;
height: 0px;
border: 10px solid;
border-color: #aaa transparent transparent transparent;
}
.list .action {
border-color: rgb(254, 0, 0);
border-radius: 50%;
}
</style>
|
初次点击, action触发, 再次点击清除action
![]()
