如何设置从数据到 v-for Vue.JS 的每个元素的宽度

如何解决如何设置从数据到 v-for Vue.JS 的每个元素的宽度

我的 html 代码如下：

                <div v-for="(s,k) in statistics" v-bind:key="s.id" class="single-stat">
                    <div class="stats">
                        {% verbatim %}
                        <div>{{ s.proc1 }}</div>
                        <div class="statid">{{ s.name }}</div>
                        <div>{{ s.proc2 }}</div>
                        {% endverbatim %}
                    </div>
                    <div class="belt1">
                        <div class="belt2" :style="Style(k)"></div>
                    </div>
                </div>

在我有数据的 Vue 对象中：

statistics: [
            {name: 'Possession',proc1: 60,proc2: 40,id: 1},{name: 'Shoots',proc1: 65,proc2: 4,id: 2},{name: 'Passes',proc1: 64,id: 3},{name: 'Fauls',proc1: 44,id: 4}
        ],

在我有的方法中：

Style: function(k){
            switch(k)
            {
                case 1:
                    return { width: statistics[0].proc1 }
                case 2:
                    return { width: statistics[1].proc1 }
                case 3:
                    return { width: statistics[2].proc1 }
                case 4:
                    return { width: statistics[3].proc1 }
            }
        }

但是代码不正确。如何通过方法样式设置从数据到我的每条皮带的宽度百分比？

解决方法

你忘记了px { width: statistics[0].proc1 } -> { width: `${statistics[0].proc1}px` }

new Vue({
  el: '#app',data: {
    statistics: [
        { name: 'Possession',proc1: 60,proc2: 40,id: 1 },{ name: 'Shoots',proc1: 65,proc2: 4,id: 2 },{ name: 'Passes',proc1: 64,id: 3 },{ name: 'Fauls',proc1: 44,id: 4 }
    ],},methods: {
    style(i) {
      return { width: `${this.statistics[i].proc1}px` }
    }
  }
})

span { display: block; background: #f5f5f5; padding: .5rem; border: 1px solid }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <span
    v-for="(statistic,i) in statistics"
    :key="i" 
    :style="style(i)"
  >
    {{ statistic.name }} width: {{ statistic.proc1 }}px
  </span>
</div>

,

我建议在这种情况下使用计算......

new Vue({
  el: '#app',computed: {
    styling() {
      return i => { return { width: `${this.statistics[i].proc1}px` };}
    }
  }
})

和

 <div v-for="(s,k) in statistics" v-bind:key="s.id" class="single-stat">
                    <div class="stats">
                        {% verbatim %}
                        <div>{{ s.proc1 }}</div>
                        <div class="statid">{{ s.name }}</div>
                        <div>{{ s.proc2 }}</div>
                        {% endverbatim %}
                    </div>
                    <div class="belt1">
                        <div class="belt2" :style="styling(k)"></div>
                    </div>
                </div>