vue v-for遍历多种使用方式
原创
(1)v-for遍历数组获取数组的item对象的value
采用v-for对数组进行遍历
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
names: ["james", "curry", "lotus"],
},
methods: {},
});
</script>
<style></style>
</body>(2)v-for遍历数组获取数组的item和key
<ul>
<li v-for="(item,key) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
</li>
</ul>
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,key) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
names: [{"Letter":"A"}, {"Letter":"B"}, {"Letter":"C"}],
},
methods: {},
});
</script>
<style></style>
</body>
(3)对象遍历，v-for也可以对单个对象进行遍历
<ul>
<li v-for="(item,key,index) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
<a>index是{{index}}</a>
</li>
</ul>
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,key,index) in names">
<a>item是{{item}}</a>
<a>key是{{key}}</a>
<a>index是{{index}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
names: {"LetterA":"A","LetterB":"B","LetterC":"C"},
},
methods: {},
});
</script>
<style></style>
</body>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录