Vue.js v-bind to a value within an array
<p>I'm just getting started with Vue.js; impressed by what it can do, but having trouble parsing the basics out of the documentation.</p>

<p>Assuming some checkboxes or a select[multiple]:</p>

<pre><code>&lt;label&gt;&lt;input v-model="fruits" type="checkbox" value="apple"&gt; apple&lt;/label&gt;&lt;br&gt;
&lt;label&gt;&lt;input v-model="fruits" type="checkbox" value="orange"&gt; orange&lt;/label&gt;&lt;br&gt;
&lt;label&gt;&lt;input v-model="fruits" type="checkbox" value="banana"&gt; banana&lt;/label&gt;&lt;br&gt;
</code></pre>

<p>Bound to an array in a Vue model:</p>

<pre><code>var vm = new Vue({
    el: '#foo',
    data: {
        fruits: ['orange'],
    },
});
</code></pre>

<p>I want to manipulate the classes on some other elements based on what is or isn't in the <code>vm.$data.fruits</code> array. I can't figure out the syntax to use with <code>v-bind:class</code> to check within the <code>fruits</code> array. I'm guessing it's something like this:</p>

<pre><code>&lt;div id="myfruits" v-bind:class="{ 'apple': fruits.apple, 'banana': fruits.banana, 'orange': fruits.orange }"&gt;fruits&lt;/div&gt;
&lt;div id="apple" v-bind:class="{ 'banana': fruits.banana }"&gt;You've got bananas!&lt;/div&gt;
</code></pre>

<p>I'm sure there must be a way to do this <code>inArray</code> kind of logic with <code>v-bind</code>. If not, can I refer to a method instead of a value? Like <code>v-bind:class="{ 'orange': hasOranges() }"</code>?</p>