Quatro tipos de dados do loop v-for no VUE, ordem dos parâmetros relacionados e precauções do v-for

O v-for in vue pode executar um loop de quatro tipos de dados, a saber, números, strings, matrizes, objetos

Primeiro de tudo, v-for é um atributo, que é uma extensão do atributo de um elemento. Lembre-se de que é v-for = "", não v-for: "".
Então, o valor do atributo v-for é uma expressão e os parâmetros internos são separados por vírgulas em vez de espaços.

Um: v-para o número do ciclo

<li v-for='num in 10'>{{ num }}</li>

Dois: sequência de loop v-for

<li v-for="str in 'haha'">{{ str }}</li>

Três: matriz de loop v-for

<div id="test">
        <ul>
            <li v-for='(item,index) in arr'>{{ item }}---{{ index }}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                arr: ['apple', 'orange', 'banana'],
            }
        })
    </script>

O item acima, índice, é uma forma semântica de escrever, não fixa, pode ser a, b, c, a ordem é o conteúdo da matriz, o índice da matriz

Quatro: objeto de loop v-for

<div id="test">
        <ul>
            <li v-for='(value,key,index) in obj'>{{ value }}---{{ key }}---{{ index }}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: "#test",
            data: {
                obj: {
                    name: "zhangsan",
                    age: 18,
                    sex: '男'
                }
            }
        })
    </script>

O primeiro é o valor, o segundo é a chave e o terceiro é o índice

Explicação da ordem dos parâmetros em matrizes e objetos

1. Em todos os ciclos, o objetivo principal é obter o valor
do elemento 2. Segundo é a chave
do elemento 3. Finalmente é o índice do elemento
Você pode confiar nessa regra para lembrar a ordem dos parâmetros