Vue列表渲染

用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要以item in items 形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。

v-for(遍历数组)基本用法

    <ul class="box">
        <li v-for="obj in persons">
            {{obj.name}}-{{obj.age}}
        </li>
    </ul>

    <script>
            new Vue({
                el: '.box',
                data: {
                    persons: [{
                        name: 'tom',
                        age: 18
                    }, {

                        name: 'jack',
                        age: 20
                    }]
                },
            })
    </script>

v-for可选的第二个参数

v-for支持一个可选的第二个参数为当前的索引。

<ul class="box">
        <li v-for="(obj,index) in persons">
            {{index}}-{{obj.name}}-{{obj.age}}
        </li>
</ul>

    <script>
            new Vue({
                el: '.box',
                data: {
                    persons: [{
                        name: 'tom',
                        age: 18
                    }, {

                        name: 'jack',
                        age: 20
                    }, {

                        name: 'make',
                        age: 19
                    }]
                },
            })
    </script>

页面输出效果如下图：

---

v-for不仅可以遍历数组，还可以遍历对象，遍历字符串，遍历指定次数。

---

v-for遍历对象

<ul class="box">
        <li v-for="(value,k) of car">
            {{k}}--{{value}}
        </li>
</ul>

    <script>
            new Vue({
                el: '.box',
                data: {
                    car: {
                        model: 'BMW X4 M',
                        price: '90万',
                        color: '绿色'
                    }
                },
            })
    </script>

页面输出效果如下图：

---

v-for遍历字符串

    <ul class="box">
        <li v-for="(char,index) of str" :key="index">
            {{index}}--{{char}}
        </li>
    </ul>

    <script>
            new Vue({
                el: '.box',
                data: {
                    str: 'hello'
                },
            })
    </script>

页面输出效果如下图：

---

 v-for遍历次数

    <ul class="box">
        <li v-for="(number,index) of 8">
            {{index}}-{{number}}
        </li>
    </ul>

页面输出效果如下图：