Vue v-for指令
<!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>
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： nodejs session MD5加密学习笔记
- 下一篇：没有了
