Question

我想在Vuetify中动态更改工具栏的颜色（请注意，我知道此网站上有类似的帖子，但没有一个使用Vue）

我使用v-bind:style来这样做，但是它不起作用！这是我的模板及其相应的脚本：

<v-toolbar
  flat
  fixed
  app
  v-bind:style="{ color: dynamic }"
  light
  scroll-off-screen
>

...

data: () => ({
 dynamic: 'black'
})

Answer 1

v-toolbar具有color属性，用于控制其背景颜色。您可以将dynamic绑定到该属性，而不是样式绑定：

<v-toolbar :color="dynamic" ...>

new Vue({
  el: '#app',
  data: () => ({
    dynamic: 'black'
  })
})

<script src="https://unpkg.com/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">

<div id="app">
  <v-app id="inspire">
    <v-toolbar dark :color="dynamic">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat>Link One</v-btn>
        <v-btn flat>Link Two</v-btn>
        <v-btn flat>Link Three</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>

在Vuetify中动态更改工具栏的颜色

1 个答案: