vue中的v-for循环遍历
本篇博客主要介绍如何用vue遍历js文件中的数组和对象index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue</title><link rel="stylesheet" href="style.cs...
·
本篇博客主要介绍如何用vue遍历js文件中的数组和对象
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>v-for 循环</h1>
<!-- 数组下标 -->
<!--
{{characters[0]}}
{{characters[1]}}
{{characters[2]}}
-->
<!-- 数组遍历 -->
<ul>
<li v-for="character in characters">
{{character}}
</li>
</ul>
<template v-for="(user,index) in users">
<h3>{{index}} . {{user.name}}</h3>
<p>Age - {{user.age}}</p>
</template>
<template v-for="(user,index) in users">
<div v-for="(val,key) in user">
<p>{{key}} - {{val}}</p>
</div>
</template>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
//实例化VUE对象
new Vue({
el:"#vue-app",
//仅限于在vue-app容器下
data:{
characters:["Mario","Luffy","Youshi"],
users:[
{name:"Henry",age:30},
{name:"Bucky",age:20},
{name:"Emily",age:18}
]
},
methods:{
},
computed:{
}
});
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献5条内容
所有评论(0)