computed: { uniqueTags() { if (!this.PDFTiInfo.exam.Tilist) { return []; }<div class="knowledge-row"> <div class="proportion">{{ uniqueTags.join(', ') }}</div> <div class="percentage">{{ uniqueTagsPercentage }}</div> </div> 这里头我想要class为proportion的样式随着uniqueTagsPercentage的百分比大小而填充对应的颜色 //将所有知识点存入到数组 const tags = this.PDFTiInfo.exam.Tilist.map(tag => tag.Taglist[1]); //Set去重一下 const uniqueTags = [...new Set(tags)]; console.log(uniqueTags) return uniqueTags }, uniqueTagsPercentage() { if (!this.PDFTiInfo.exam.Tilist) { return 0; } const uniqueTagsCount = this.uniqueTags.length; const totalTagsCount = this.PDFTiInfo.exam.Tilist.length; const percentage = (uniqueTagsCount / totalTagsCount) * 100; return percentage.toFixed(2); } },
时间: 2024-02-21 15:58:40 浏览: 33
如果您想要实现class为proportion的样式随着uniqueTagsPercentage的百分比大小而填充对应的颜色,可以使用计算属性computed来实现。
首先,您需要将uniqueTagsPercentage转换为一个CSS颜色值。例如,您可以将uniqueTagsPercentage的值映射到一个颜色渐变中。然后,您可以使用v-bind:style指令将计算属性绑定到class为proportion的元素上,以实现样式的动态填充。
以下是一个可能的实现代码:
```
computed: {
uniqueTags() {
if (!this.PDFTiInfo.exam.Tilist) {
return [];
}
const tags = this.PDFTiInfo.exam.Tilist.map(tag => tag.Taglist[1]);
const uniqueTags = [...new Set(tags)];
return uniqueTags;
},
uniqueTagsPercentage() {
if (!this.PDFTiInfo.exam.Tilist) {
return 0;
}
const uniqueTagsCount = this.uniqueTags.length;
const totalTagsCount = this.PDFTiInfo.exam.Tilist.length;
const percentage = (uniqueTagsCount / totalTagsCount) * 100;
return percentage.toFixed(2);
},
proportionStyle() {
const colors = [
'#ff0000', // red
'#ffff00', // yellow
'#00ff00', // green
'#00ffff', // cyan
'#0000ff', // blue
'#ff00ff' // magenta
];
const colorIndex = Math.floor(this.uniqueTagsPercentage / 20);
const color = colors[colorIndex];
return { backgroundColor: color };
}
}
```
然后,在模板中,您可以使用以下代码将计算属性绑定到class为proportion的元素上:
```
<div class="proportion" :style="proportionStyle">{{ uniqueTags.join(', ') }}</div>
```
这样,当uniqueTagsPercentage的值改变时,class为proportion的元素的背景颜色将动态地填充相应的颜色渐变。