循环遍历指令 v-for

Mahe666

Vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 Vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。

它可以遍历数组类型以及对象类型的数据，JavaScript 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for循环</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-- 列表里面有几项就重复几次li标签里面的内容 -->
        <!-- 响应式，会和列表里内容同步 -->
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除第一条数据" @click="remove1">
        <ul>
            <li v-for="item in arr">
                马赫真帅
            </li>
        </ul>
        <ul>
            <li v-for="item in arr">
                马赫真帅{{":"+item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1+","}}马赫真帅{{":"+item}}
            </li>
        </ul>
        <ul>
            <li v-for="item in vegetables" :title="item.name">
                {{item.name}}
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:[
                    "giao1",
                    "giao2",
                    "giao3"
                ],
                vegetables:[
                    {name:"土豆"},
                    {name:"豆角"},
                    {name:"茄子"},
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"萝卜"})
                },
                remove:function(){
                    // 从第一条数据开始移除（最上面）
                    this.vegetables.shift();
                },
            }
        })
    </script>
    
</body>
</html>