是否可以在 vue js 样式段中使用花括号？

Question

我想知道是否可以在 vue.js 的样式段中使用花括号作为值？

例如

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

Answer 1

有一个experimental feature 用于绑定脚本提供的 CSS 变量。试试这个：

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

或尝试新的v-bind() 注入