vuejs：根据每个循环的 vuejs 中数组中的 2 个变量更改 <div> 的宽度

Posted 2023-02-16

【中文标题】vuejs：根据每个循环的 vuejs 中数组中的 2 个变量更改 <div> 的宽度

【英文标题】：vuejs: changing width of <div> based on 2 variables from array in a vuejs for each loop

【发布时间】：2021-06-05 06:38:28

【问题描述】：

我刚开始使用 vuejs，并坚持它是如何工作的。

目前，我在 div 上有一个小的“vuejs for each-loop”，它从 json 对象中获取信息。 我正在尝试计算最大距离上的当前距离，并让它影响一个 div。

当前的html：

<div id="visuals" class="col-lg-9 col-sm-12 wow fadeInUp pt-5 pt-lg-0">
    <div v-for="element in sortedClubs">
        <div class="progessbar-title"> element.Name </div>
        <div class="progress progressvisual">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                 element.km  km
            </div>
        </div>
    </div>
</div>

当前的 vuejs：

var app = new Vue(
        el: '#visuals',
        data: elements: [
            "Name":"a","km":"1361",
            "Name":"b","km":"6409",
            "Name":"c","km":"1067"],
        computed: 
            sortedClubs: function() 
                function compare(a, b) 
                    if (a.km_lopen > b.km_lopen)
                        return -1;
                    if (a.km_lopen < b.km_lopen)
                        return 1;
                    return 0;
                

                return this.elements.sort(compare);
            
        
    );

由于列表是从高到低排序的，我可以用 sortedClubs[0].km 取最大值

但是如何根据 element.km/sortedClubs[0].km*100 作为百分比更改进度条 div 的 with，以便每个 div 都有它的百分比？

【参考方案1】：

您可以使样式动态添加：在它之前。 然后使用 :style 你可以传递百分比而不是硬编码的 50%。

类似

:style="`width: $element.km/sortedClubs[0].km * 100%;`"

【讨论】：

这确实是解决方案，为什么需要2种引号？为什么要指定`类型？

您也可以使用 :style=" width: element.km/sortedClubs[0].km * 100 + '%' " 为动态样式添加更多字段。从 :style="width: $element.km/sortedClubs[0].km * 100%;" 第一个引号是 vue 的默认值。在反应中你用 包装值在你用 "" 包装的 vue 中第二个`是用于制作一个实际的字符串并允许在其中使用 $