vue中不提倡直接操作dom元素，所以这里使用类名实行互斥效果。
|
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
|
<template lang=
"pug"
>
ul
li(v-
for
=
"(item,index) in classArr"
, @click=
"result(index)"
, :class=
"resultNum === index?'active':''"
)
this
is {{item}}
</template>
<style lang=
"scss"
>
li {
list-style: none;
width: 100px;
margin-top: 10px;
border: 1px solid red;
&:hover {
cursor: pointer;
}
}
.active{
}
</style>
<script>
export
default
{
data(){
return
{
classArr: [
"one"
,
"two"
,
"three"
],
num:
""
,
}
},
methods: {
result(index){
this
.num = index;
}
},
computed:{
resultNum(){
return
this
.num;
}
}
}
</script>
|