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