v-for遍历
Posted 高不高
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于v-for遍历的主要内容，如果未能解决你的问题，请参考以下文章