v-for遍历
<!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>
浙公网安备 33010602011771号