vue菜单列表选中并添加active样式高亮同级元素变暗

常规的js实现，点击当前的元素添加class样式，然后遍历把同级元素的高亮样式给移除。平时使用js都是这样写，刚刚想了想vue可以数据双向绑定，不用这么麻烦去对同级元素遍历操作。因为平时用PHP都是这样的，加个判断就可以实现了。

html代码

<div class="main" id="app" v-cloak>
    <ul class="filter">
        <li v-bind:class=" postdata.scale == v ? 'active':'' " @click="setScale(v)" v-for="(v,k) in config.scale">{{v}}</li>
    </ul>
</div>

vue代码

var vm = new Vue({
    el: '#app',
    data: {
        config: {
            scale: ['5m', '15m', '30m', '1h', '2h', '6h', '12h', '1d', '3d', '7d', '14d', '1m', '3m', '6m', '1y', '所有']
        },
        postdata: {
            scale: '5m'
        },
    },
    mounted: function() {
    },
    methods: {
        setScale: function(val) {
            this.postdata.scale = val;
        },
    }
})

效果截图