vue中实现元素选中互斥
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> |
