使用 Vue 数据包含 CSS 元素答案

【问题标题】：Using Vue Data to Contain CSS Element使用 Vue 数据包含 CSS 元素
【发布时间】：2020-01-22 02:29:20
【问题描述】：

我正在使用 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 端访问它？

谢谢！

【问题讨论】：

嗨，也许你可以使用 :style="computedProperty" 并使用它

标签： javascript css node.js vue.js quasar-framework

【解决方案1】：

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

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

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

Sample code

【讨论】：

【解决方案2】：

你可以这样做。

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

【讨论】：

【解决方案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`;
        }
    }

【讨论】：