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;
}

这是我的引导进度条：

<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);正常运作。但是如何将其绑定到样式（style="width: 15%;"）？

非常感谢

Answer 1

您可以按照here所述将内联样式绑定到vue数据。您需要做的就是从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>

Vue.js进度条

1 个答案: