Vue之循环遍历
Vue循环遍历
一、v-for遍历数组和对象
1.1.遍历数组不显示index（下标）
<div id="app">
<ul>
<li v-for="item in colors">{{item}}</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
colors: ['red','yellow','blue','green']
}
})
</script>
1.2.遍历数组并显示index(下标)
<div id="app">
<ul>
<li v-for="(item,index) in colors">
{{index+1}}.{{item}}
</li>
</ul>
</div>1.3.遍历对象显示value值
<div id="app">
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
obj: {
name: 'sunny',
age: 18,
sex: 'male'
}
}
})
</script>只有一个变量时，该变量对应对象的value值
1.4.遍历对象显示key和value
<div id="app">
<ul>
<li v-for="(value,key) in obj">{{key}}:{{value}}</li>
</ul>
</div>有两个变量时，第一个变量代表value值，第二个变量代表key
1.5.遍历对象显示key、value和index
<div id="app">
<ul>
<li v-for="(value,key,index) in obj">
{{index}}-{{key}}:{{value}}
</li>
</ul>
</div>
二、列表案例（v-for、v-bind：、@click）
电影列表案例 默认第一个li为红色，再点击哪个li，该li字体颜色变红
思路：初始化currentIndex为0，用作记录第0个li的位置，后点击哪个li，就把该li的位置赋给cuurentIndex
1.用v-bind的对象语法动态绑定class，当currentIndex和当前li的index相同时，才给该li添加active类名。默认的currentIndex为0，只有第一个index为0的li才被添加上active的类名，则实现第一个li字体为红色的默认样式。
2.利用点击事件，动态给currentIndex赋该li的index值，则点击哪个li，那个li就会被添加上active的类名，完成最终效果
<div id="app">
<ul>
<li v-for="(item,index) in movies" :class="{active:currentIndex===index}" @click="liClick(index)">
{{item}}
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
currentIndex: 0,
movies: ['大理寺日志','进击的巨人','罗小黑战记','一人之下']
},
methods: {
liClick(index){
this.currentIndex = index;
}
}
})
</script>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021.11.30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
