v-bind in vue style

Problem example

I find an example in a book, it display how to use v-bind in the style section, the code is like below:

h1 {
  margin-top: v-bind(headingStyles.marginTop);
  text-align: v-bind(headingStyles.textAlign);
  color: v-bind(headingStyles.color);
}

Vue Example

But it has compile error, after look into the example in the Vue document v-bind() in CSS

The example is like below:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

Fix the compile error

h1 {
  margin-top: v-bind('headingStyles.marginTop');
  text-align: v-bind('headingStyles.textAlign');
  color: v-bind('headingStyles.color');
}

Conclusion

From the example, the v-bind can use in the style, the problem of the issued example is that it use the object in the v-bind, if there are only the property in the vue model, such as color, we can use v-bind(color); or v-bind('color');, but for the object and property, we should use quote in the v-bind like this v-bind('headingStyles.color');