vue实现单选加active，其他元素则移除active

根据项目需求，要实现单选，之前做了好几次，很常用的一个小案例，在很多地方都能使用上，因此记录下来

实例如下

CSS

  ul li {
        float: left;
        height: 35px;
        line-height: 35px;
        border: 1px solid #888;
        border-radius: 15px;
        list-style: none;
        cursor: pointer;
        padding: 5px 15px;
        margin: 0 10px;
    }

    ul li.active {
        background-color: #e4393c;
        color:#fff;
    }

html

<ul>
     <li v-for="(item,index) in items" @click="setColor(index)" :key="item.message"
         :class="{active:index == num}">
         {{item.message}}
     </li>
</ul>

javascript

       methods:{
            setColor(index){
                this.num = index;
                },
                //下面是常规写法  两种都行
                // setColor:function(index){
                //     this.num = index
                // }

        }

效果如下：

一个简单的demo，当然，你要获取点击的id或者其他的数据，都是传参实现，这个就看项目的需求了！