javascript - 使用 Vue 数据包含 CSS 元素

Question

我使用 Quasar 框架和 vue 来进行应用程序开发。

这是我的代码:

<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Save </q-tooltip>
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Open </q-tooltip>
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Exit </q-tooltip>

基本上，我想知道是否有一种方法可以将 bg-amber 保存在参数中，以便将来我想更改此类(颜色)时，我只需更改参数中的值，而不用更改所有这些。

类似这样的事情:

export default {
  data () {
    return {
      tooltipColor: 'bg-amber'
    }
  }
}

但是如果我这样做，我应该如何在 html 端访问它？

谢谢!

Answer 1

我认为你必须使用这样的内联样式。

<h1 :style="`background-color: ${myColor}`">Hello, Vue!</h1>

export default {
  data () {
    return {
      myColor: 'red'
    }
  }
}

Sample code