v-for指令

类似于其他编程语言中的”for“循环

先建立一个数组

<script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["山东","陕西","河南","河北"]
        }
    })    

　　然后在前面接收

<div id="app">      
        <ul>
            <li v-for="yunxue in arr">
                <!--中间的“in”不能更改，其他俩可以改,第一个要与下面
                的那个两个大括号里面的那个一致-->
                昏睡的云雪:{{yunxue}}
            </li>    
        </ul>   
        
    </div>

　　同样也可以采取另一种方法

<li v-for="(yunxue,hunshui) in arr">
                <!--上面下括号内的接收顺序，“yunxue”接收“arr”数组的数据
                “hunshui”表示顺序-->
                {{ hunshui+1}}昏睡的云雪:{{yunxue}}
                <!--“hunshui”的初始值是“0”-->
            </li>

　　此时在”data“中添加一个新数组

food:[
                    {name:"面包"},
                    {name:"辣条"} 
                ] 

　　在”div“标签中

<h2 v-for="de in food" v-bind:title="de.name">
            {{ de.name }}
    </h2>

　　也可以设置按钮来增加减少信息

method:{
                add:function(){
                    this.food.push({ name:"汉堡"});
                },
                remove:function(){
                    this.food.shift();
                    //移除最左边元素
                }
            },

　　

<input type="button" value="增加" @click="add">
        <input type="button" value="减少" @click="remove">