v-for
- 作用:根据数据生成列表
- 语法是
(iteml,index)in 数据
,item
和index
是占位符(名字可变) - 数组经常和
v-for
使用 - 数组的更新会同步到页面上,是响应式的
程序例子:
<div id="app">
<p v-for="item in arr">{{item}}</p>
<hr><!--分割线-->
<ul>
<li v-for="item in arr">
段位: {{item}}
</li>
</ul>
<hr>
<ul>
<li v-for="(item,index) in arr">
{{index}} 段位: {{item}}
</li>
</ul>
<hr>
<ul>
<button @click="add">上菜</button>
<button @click="remove">吃掉</button>
<li v-for="(item,index) in foods" v-bind:title="item.name">
第{{index+1}}个是: {{item.name}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["黄铜", "白银", "黄金", "白金"],
foods: [{ name: "香肠" }, { name: "土豆" }, { name: "西红柿" }]
},
methods:{
add:function(){
this.foods.push({name:"加个蛋"});
},
remove:function(){
this.foods.pop();//移除最后一个元素
//this.foods.shift();//移除第一个元素
}
}
})
</script>
运行结果:
v-model
- 作用:获取和设置表单元素的值(双向数据绑定)
- 表单元素的值和绑定的数据同步更新(即无论更改哪一个另一个都会同步更新)
程序例子:
<div id="app">
<input type="button" value="修改message" @click="setMessage">
<input type="text" v-model="message" @keyup.enter="getMessage" >
<P>{{message}}</P>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello"
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message="Vue";
}
}
})
</script>
运行结果:
v-on补充
- 在利用
v-on
/@
绑定事件是,还可以传递参数 - 回车事件
@keyup.enter
程序例子:
包含参数的事件,字符串用单引号
@click="doIt(666,' Vue')
doIt:function(param1,param2){ alert(param1 + param2); }
<div id="app">
<input type="button" value="点我" @click="doIt(666,' Vue')">
<input type="text" value="" @keyup.enter="sayHi">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(param1,param2){
alert(param1 + param2);
},
sayHi:function(){
alert("吃了没!");
}
}
})
</script>