javascript - 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 in 20 进行循环，而不是使用 n*5 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>