Vue.js组件中的V-for无法正常工作

Question

我在vue.js中有一个组件，如下所示。

<template>
        <md-input-container>
            <label :for="'smartpercents' + _uid"> {{ label | translate }}</label>
            <md-select :id="'smartpercents' + _uid" :name="'smartpercents' + _uid" v-model="percents" @change="onChange" md-menu-class="md-size-5 md-align-trigger">
                <md-option v-for="n * 5 in 20" :value="n" :key="n">{{ n }}</md-option>
            </md-select>
        </md-input-container>
</template>

    <style scoped>

    </style>


    <script>

    export default {
        props: {
            value: {
                required: true,
                default: null,
                validator(val) {
                    return val === null
                        || typeof val === 'number'
                        || val instanceof Number
                        || val instanceof Array;
                }
            },

            label: {
                type: String,
                required: false,
                default: null
            },

            multiple: {
                type: Boolean,
                required: false,
                default: null
            }
        },

        data() {
            return {
                percents: null
            };
        },

        methods: {
            onChange(selected) {
                const vm = this;

                vm.$emit('input', selected);
            }
        },

        created() {
            const vm = this;

            vm.percents = vm.value;

            vm.$watch('value', (newValue, oldValue) => {
                if (newValue !== oldValue) {
                    vm.percents = newValue;
                }
            });
        }
    };

    </script>

我想显示如下数字

5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100

我用下面的代码来做到这一点

码：

<md-option v-for="n * 5 in 20" :value="n" :key="n">{{ n }}</md-option>

但是这段代码无法完成我想做的事情，而且行不通

如何通过将5增加到100到5来在屏幕上打印？

任何帮助将不胜感激。

谢谢。

Answer 1

代替n*5 in 20的n*5 in 20 ，您可以尝试n in 20循环，并使用n*5获得期望值。下面的代码将为您提供一个简短的想法：

 new Vue({ el: '#app', data: {}, methods: {} }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script> <div id="app"> <div v-for="n in 20"> {{n*5}} </div> </div>