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>