title: Vue.js v-bind to a value within an array
body: <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>