我想用两种颜色给表格的一个单元格上色,使得它的左右部分有不同的颜色。但是,我无法动态更改左右颜色的部分。
我首先尝试通过写作风格
<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>
这按预期工作,因此单元格被着色为纯蓝色和纯白色。
但是,我很难从脚本中更改
$color_right
。
我试过的是
<script>
import { ref } from "vue";
export default {
data() {
return {
color_portion: ref(0.5),
}
}
}
</script>
<style lang="scss" scoped>
@function number($string) {
// Matrices
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
$numbers: 0 1 2 3 4 5 6 7 8 9;
// Result
$result: 0;
// Looping through all characters
@for $i from 1 through str-length($string) {
// Do magic
}
@return $result;
}
table {
th, td {
$color_right: percentage(number(v-bind(color_portion))); // want it to be color_portion%
$color_left: 50%; // will change to 1 - $color_right
background: linear-gradient(to right, blue $color_right, white $color_left);
}
}
</style>
不幸的是,
$color_right
在我看到的应用程序中似乎被评估为只是一个数字。
有什么方法可以使用 v-bind
和百分比吗?