Is it possible to use curly braces in vue js style segment?-CodePudding

I was wondering if it is possible to use curly braces for a value in the style segment in vue.js?

For example

.container {
  background: url({{ image-url }};
  color: {{ color-1 }}
}

CodePudding user response：

There is an experimental feature to bind CSS variables provided from the script. Try this:

<template>
  <div class="text">Lorem ipsum</div>
</template>

<script>
import {ref} from 'vue'
export default {
  setup() {
    const color = ref('red');
    const image = ref('url(https://picsum.photos/200/300)');
    
    return {color}
  }
};
</script>

<style vars="{ color, image }">
.text {
  color: var(--color);
  background-image: var(--image);
}
</style>

Or try new v-bind() injection