如何让文本插值在CSS函数与Router Link中生效？

尝试实现一个可复用卡片组件，根据不同图片动态切换属性值。目前title的文本插值可正常工作，但在RouterLink的to属性及CSS的background-image函数中使用{{ link }}、{{ image }}进行文本插值时无法生效，需纠正用法。

代码示例：

<template>
      <RouterLink class="card" to="{{ link }}">
      <div class="card__background" style="background-image: url({{ image }})"></div>
      <div class="card__content">
        <h3 class="card__heading">{{ title }}</h3>
      </div>
      </RouterLink>
</template>
<script>
import { RouterLink } from 'vue-router';
export default {
    props: ['link', 'image', 'title'],
    created() {
      console.log(this.link)
      console.log(this.image)
      console.log(this.title)
    },
}
</script>

在Vue中，双大括号{{}}仅适用于文本插值，不能直接用于属性绑定。动态属性和样式需要使用Vue的专属绑定语法：

• RouterLink的to属性绑定：将to="{{ link }}"改为:to="link"（:是v-bind:的简写），通过属性绑定传递props值。
• 动态背景图样式绑定：直接在style属性中用双大括号无效，需使用动态style对象语法，把style="background-image: url({{ image }})"改为:style="{ backgroundImage: url(${image}) }"。

修改后的完整代码：

<template>
  <RouterLink class="card" :to="link">
    <div class="card__background" :style="{ backgroundImage: `url(${image})` }"></div>
    <div class="card__content">
      <h3 class="card__heading">{{ title }}</h3>
    </div>
  </RouterLink>
</template>
<script>
import { RouterLink } from 'vue-router';
export default {
  props: ['link', 'image', 'title'],
  created() {
    console.log(this.link);
    console.log(this.image);
    console.log(this.title);
  },
};
</script>

内容的提问来源于stack exchange，提问作者Akirambur