Question

我想创建一个按钮，点击后会改变md-card的颜色。我不确定应该怎么做。我知道这里应该是变量，点击从false变为true后再变化，然后执行一些函数但不知道应该在里面。

<template>
  <div>
    <md-card 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>
</template>


<script>
  export default {
    name: 'FirstRouteChild',
    data: {
        available: true,
        },
    computed: {
    }
  }
</script>


<style lang="scss" scoped>
  @import "../../node_modules/vue-material/src/theme/engine";
  @import "../../node_modules/vue-material/src/base/theme";*/
  @import "../../node_modules/vue-material/src/components/MdCard/theme";

  @include md-register-theme("default", (
    primary: md-get-palette-color(green, A200), // The primary color of your application
    accent: md-get-palette-color(red, A200) // The accent or secondary color
  ));

  .md-card {
    width: 320px;
    margin: 4px;
    display: inline-block;
    vertical-align: top;
  }
</style>

Answer 1

您可以使用以下语法将类绑定到布尔值：

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

在你的例子中，这变为：

<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>

有关详细信息，请参阅文档：https://vuejs.org/v2/guide/class-and-style.html

在vue.js

1 个答案: