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

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

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

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