vue中v-for指令的用法
vue中V-for指令的用法欢迎使用Markdown编辑器语法欢迎使用Markdown编辑器在vue中，可以使用v-for指令进行数组的循环遍历。语法<ul><li v-for="item in list">{{item}}</li></ul><ul><li v-for="(item,i) in list">{{i}}-{{i
·
vue中V-for指令的用法
在vue中，可以使用v-for指令进行数组的循环遍历。
v-for指令既可以遍历数组也可以遍历对象。
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<ul>
<li v-for="(item,i) in list">{{i}}-{{item}}</li>
</ul>
//其中，item为遍历元素的别名，i为遍历元素的下标
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in name">{{item}}</li>
</ul>
<ul>
<li v-for="(item,i) in name">{{i}}-{{item}}</li>
</ul>
<ul>
<li v-for="(value,key) in lilei">{{key}}-{{value}}</li>
<!-- value获取的是对象的属性值，key获取的是属性名 -->
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
name:['aaa','bbb','ccc','ddd'],
lilei:{sname:'lilei',sage:15},
},
methods:{
}
})
</script>
</body>
</html>
运行结果：
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)