[Vuejs]-Change color of md-card in vue.js

You can bind a class to a boolean with the following syntax:

v-bind:class="{ availableClassName: available }"

In your example this becomes:

<div>
  <md-card v-bind:class="{ availableClassName: available }" class="md-primary" md-with-hover >
    <md-ripple>
      <md-card-header>
        <div class="md-title" >color</div>
      </md-card-header>
      <md-card-actions md-alignment="space-between">
        <md-button v-on:click="available = !available">Action</md-button>
      </md-card-actions>
    </md-ripple>
  </md-card>
</div>

See the documentation for more details: https://v2.vuejs.org/v2/guide/class-and-style.html