使用 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 保存在参数中，以便将来我想更改此 class（颜色）时，我只必须更改参数中的值而不是更改所有这些。

像这样：

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

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

谢谢！

Answer 1

您可以使用 v-bind 指令传递任何属性。（在属性前使用 : 是 v-bind 的 shorthand。当你做 v-bind 时，你需要传递一个 JavaScript 表达式。（就像你在:offset属性中做）

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

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

Answer 2

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

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

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

Sample code

Answer 3

你可以这样做。

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

使用 Vue 数据包含 CSS 元素

Using Vue Data to Contain CSS Element

javascript

css

node.js

vue.js

quasar-framework