<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app1">
<ul>
<li v-for="item in items">{{item.message}}</li> <!--v-for指令还支持一个可选的参数，表示当前项的索引 in也可用of代替 -->
<li v-for="(mun,index) in muns">{{parent}}-{{index+1}}-{{mun.no}}</li> <!-- 在v-for块中 完全可以访问data中的属性-->
</ul>
</div>
<script>
var foo = new Vue({
el:'#app1',
data:{
parent:'xiangmu',
items:[
{message:'ABC'},
{message:'def'}
],
muns:[
{no:'a'},
{no:'b'},
{no:'c'},
{no:'d'},
{no:'e'}
]
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<ul id="app1">
<li v-for="(abc,key,index) in objs">{{index}}-{{key}}-{{abc}}</li> <!-- v-for循环对象 由三个参数，value， key，index -->
<li v-for="(item,index) in items">{{index}}--{{item.name}}--{{item.age}}</li> <!-- v-for循环数组 有两个参数，value，index-->
</ul>
<script>
var foo = new Vue({
el:'#app1',
data:{
objs:{
firstName:'ling',
lastName:'sun',
age:26
},
items:[
{name:'jek',age:23},
{name:'sun',age:34},
{name:'mark',age:26},
]
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
