Vue3中如何通过脚本动态绑定百分比控制表格单元格双色占比？

问题场景 #

想要给表格单元格设置左右分色的渐变背景，静态设置占比（如蓝白各50%）可以正常工作，但无法通过脚本动态调整颜色占比。

静态实现代码（可正常运行）：

<style lang="scss" scoped>
table {
  th, td {
    $color_right: 50%;
    $color_left: 50%;
    background: linear-gradient(to right, blue $color_right, white $color_left);
  }
}
</style>

尝试过用SCSS函数结合v-bind绑定动态值，但由于SCSS编译时无法解析运行时的v-bind变量，导致无法实现动态调整效果。

可行解决方案 #

方案1：直接绑定完整的background样式 #

利用Vue3支持在<style>中直接使用v-bind绑定JS变量的特性，直接生成完整的渐变背景字符串：

<script setup>
import { ref } from 'vue';
// 控制蓝色部分的占比（0-1之间的数值）
const colorPortion = ref(0.5);
</script>

<style scoped>
table th, table td {
  background: v-bind(`linear-gradient(to right, blue ${colorPortion * 100}%, white ${colorPortion * 100}%)`);
}
</style>

方案2：提前计算百分比字符串 #

如果需要更清晰的拆分逻辑，可以在脚本中提前计算好百分比字符串，再绑定到样式中：

<script setup>
import { ref, computed } from 'vue';
const colorPortion = ref(0.5);

// 计算蓝色部分的百分比（如"50%"）
const rightPercent = computed(() => `${colorPortion.value * 100}%`);
// 计算白色部分的起始位置（和蓝色占比一致，实现分割）
const leftPercent = computed(() => rightPercent.value);
</script>

<style scoped>
table th, table td {
  background: linear-gradient(to right, blue v-bind(rightPercent), white v-bind(leftPercent));
}
</style>

关键说明 #

SCSS变量是编译时生效的，而Vue的v-bind是运行时替换变量，所以无法通过SCSS函数去处理v-bind绑定的值。直接在样式中使用v-bind绑定JS计算后的结果，是实现动态样式的正确方式。

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