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>

转载于:https://www.cnblogs.com/lizhibk/p/9177422.html