<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
/* 取消ul前面的点 */
ul {
list-style: none;
}
/* odd 为奇数项
even 为偶数项 */
ul li:nth-child(odd) {
color: chocolate;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item,index in items" v-bind:key="index">{{index}}--->{{item.message}}</li>
</ul>
<ul>
<li v-for="value,key in objects" :key="key">
{{key}}-----> {{value}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{ message: "雷德王" },
{ message: "艾利王" },
{ message: "茜拉" },
{ message: "哥莫拉" }
],
objects: {
name: '金刚狼',
height: '160cm',
weight: '136kg',
country: '加拿大',
},
}
});
</script>
</body>
</html>
范例2 for 接受三个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul v-for="(value,name,index) in vmel">
{{value}}---->{{name}}---->{{item}}
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
vmel:{
name:'zhangsan',
age:20,
}
}
})
</script>
</body>
</html>