Vue基础-6(v-for:根据数据生成列表结构、v-model:获取和设置表单元素的值)

Vue基础-6

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!!!";
     }
  }
})