javascript - Vue.js 进度条

Question

我正在使用 vue.js 2.0 我有这个方法:

calculatePercentage(option) {
    let totalVotes = 0;

    this.poll.options.forEach((option) => {
        totalVotes+= option.votes.length;
    });

    return option.votes.length / totalVotes * 100;
}

这是我的 Bootstrap 进度条:

<div class="span6">
    <div v-for="option in poll.options">
        <strong>{{ option.name }}</strong><span class="pull-right">{{ calculatePercentage(option) }}%</span>
        <div class="progress progress-danger active" aria-valuenow="12">
            <div class="bar" style="width: 15%;"></div>
        </div>
    </div>
</div>

所以 calculatePercentage(option); 工作正常。但是我如何将它绑定(bind)到样式 (style="width: 15%;") ？

非常感谢

Answer 1

您可以按照说明将内联样式绑定(bind)到 vue 数据 here .您需要做的就是从 calculatePercentage 返回值并按如下方式使用它:

<div class="span6">
    <div v-for="option in poll.options">
        <strong>{{ option.name }}</strong><span class="pull-right">{{ calculatePercentage(option) }}%</span>
        <div class="progress progress-danger active" aria-valuenow="12">
            <div class="bar" v-bind:style="{width: calculatePercentage(option) + '%'}"></div>
        </div>
    </div>
</div>