vue如何实现对象或数组数据的绑定

Question

<div id="app">

    <div v-for="item in count" v-bind:class="arr">{{ item }}</div>

</div>

<script src="vue.js"></script>

<script>

    var vm = new Vue( {

        el: "#app",

        data: {

            count: 100,

            arr: []

        }

    } );

</script>

我想做的是通过对100个div的class进行数组数据的绑定，这样我就可以通过一个数组来控制对应的div的class了那该如何实现这样的需求呢？例如实现如下的需求：

<div id="app">

<div v-for="(item,i) in count" v-bind:class="arr[i]" v-bind:index="i" v-on:click="divClick">{{ item }}</div>

</div>

<script src="vue.js"></script>

<script>

    var vm = new Vue( {

        el: "#app",

        data: {

            count: 100,

            arr: []

        },

        methods: {

            divClick: function( e ) {

                this.arr[ e.target.getAttribute( "index" ) ] = "active";

                console.log( this.arr );

            }

        }

    } );

</script>

当点击一个div时，为该div添加一个“active”样式，保证只有当前被点击的div会添加actve样式，其他的不会变，因此这里才会想到数组和对象作为数据。

Answer 1

<div&nbsp;v-for="(item,i)&nbsp;in&nbsp;count"&nbsp;v-bind:class="arr.join('&nbsp;')">{{&nbsp;item&nbsp;}}</div>

Answer 2

<div&nbsp;v-for="(item,i)&nbsp;in&nbsp;count"&nbsp;v-bind:class="arr[i]">{{&nbsp;item&nbsp;}}</div>