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

你可以这样做。

<q-tooltip :content-class="[tooltipColor, 'text-black' ,'shadow-4']" :offset="[10, 10]"> Save </q-tooltip>

Answer 2

我认为你必须像这样使用内联风格。

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

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

Sample code

Answer 3

您可以使用v-bind指令传递任何属性。(在属性之前使用:是v-bind的简写。在执行v-bind时，需要传递一个JavaScript表达式。(就像在:offset属性中所做的那样)

<q-tooltip :content-class="contentClass" :offset="[10, 10]"> Exit </q-tooltip>

    computed: {
        contentClass() {
             return `${this.tooltipColor} text-black shadow-4`;
        }
    }