vue如何切换样式？

Question

比如
有三个按钮

button1.current button2.current button3.current

默认高亮button1，点击之后切换

在data写了个数组 [true, false, false]

click的method里传个index，@click="a(index)" button是循环出来的

用传入index来进行数组切换，this.array[index] = true

重新赋值后，dom没更新...

Answer 1

this.array[index] = true是无法被检查到，具体看数组更新检测

Answer 2

直接上代码看效果吧。
https://jsfiddle.net/zhoou/d6...

*{ margin:0; padding:0; }
ul,li,ol{ list-style: none; }
.on{ color: red; }

<div class="el">
    <ul class="menu">
        <li v-for='item in menu' v-bind:class="{'on':flag==$index}" v-on:click='light($index)'>{{item.name}}</li>
    </ul>
</div>

var app=new Vue({
    el:'.el',
    data:{
        menu:[
            {'name':'语文'},
            {'name':'数学'},
            {'name':'自然'},
            {'name':'社会'},
            {'name':'和谐'}
        ],
        flag:0
    },
    methods:{
        light:function(index){
            this.flag=index;
        }
    }
});

效果：

Answer 3

vue的官方文档里面，for循环是可以带俩个参数的，你可以带上当前点击对象的index，传入点击事件，点击事件会修改nowindex , 计算属性计算当前的index和data里面的nowIndex是不是相同，如是相同就是会改变样式，否则就会选择渲染被动的样式