v-for根据数据生成列表结构 数组经常和v-for结合使用 语法是(item,index) in数据 item 和 index 可以结合其他指令一起使用 数组长度的更新会同步到页面上，是响应式的
例：
<div id="app"> <ul> <li v-for="(item,index) in arr" :title="index"> {{item}}||{{index}} </li> </ul> <ul> <li v-for="(item,index) in arr2" :title="item"> {{index+1}}{{item}}的美食 </li> </ul> <input type="button" value="添加菜品" @click="add" /> <input type="button" value="移除菜品" @click="remove" /> <h3 v-for="(item) in food"> {{item.name}}||{{item.price}} </h3> </div> var app = new Vue({ el:"#app", data:{ arr:[2,3,4,5], arr2:["北京","天津","上海","广州","深圳"], food:[ {name:"宫保鸡丁",price:25}, {name:"鱼香肉丝",price:22}, {name:"蚝油生菜",price:18} ] }, methods:{ add:function(){ this.food.push({name:"新加菜",price:0}); }, remove:function(){ this.food.shift(); //移除最左端数据 } } })v-model获取和设置表单元素的值(双向数据绑定) v-model指令的作用是便捷的设置和获取表单元素的值 绑定的数据会和表单元素值相关联 绑定的数据—表单元素的值
例：
<div id="app-3"> <h3>—————app3—————</h3> <h2>{{message}}</h2> <input type="text" v-model="message" @keyup.enter="getMsg" /> <input type="button" @click="setMsg" value="刷新msg" /> </div> var app3 = new Vue({ el:"#app-3", data:{ message:"小小鸟" }, methods:{ getMsg:function(){ alert(this.message); }, setMsg:function(){ this.message = "message!!!"; } } })