<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<ul>
<li v-for="item in names">
{{item}}
</li>
</ul>
<!-- 遍历时，使用索引值-->
<ul>
<li v-for="(item,index) in names">
{{index}}{{item}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'sadca',
names:['wa','he','duo']
},
computed:{
}
})
</script>
</body>
</html>
遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<ul>
<!-- 获取值，只是key-->
<li v-for="item in info">
{{item}}
</li>
</ul>
<!-- 获取key和value-->
<ul v-for="(value,key,index) in info">
<li>{{value}}{{key}} {{index}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
info:{
name:'dss',
value:'12',
height:1.88
}
},
computed:{
}
})
</script>
</body>
</html>
添加key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<!-- 获取值，只是key-->
<li v-for="item in letters" :key="item">
{{item}}
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
letters:['a','b','c','c','e']
},
computed:{
}
})
</script>
</body>
</html>