那我想要的是class为proportion的样式随着uniqueTagsPercentage的百分比大小而生成对应的长度百分比呢
时间: 2024-02-21 22:58:43 浏览: 18
如果您想要实现class为proportion的样式随着uniqueTagsPercentage的百分比大小而生成对应的长度百分比,可以使用计算属性computed来实现。
以下是一个可能的实现代码:
```
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() {
return { width: `${this.uniqueTagsPercentage}%` };
}
}
```
然后,在模板中,您可以使用以下代码将计算属性绑定到class为proportion的元素上:
```
<div class="proportion" :style="proportionStyle">{{ uniqueTags.join(', ') }}</div>
```
这样,当uniqueTagsPercentage的值改变时,class为proportion的元素的宽度将动态地生成相应的长度百分比。