站长学院
CMS建站教程 SEO优化攻略
来源:齐鲁CMS 栏目:VUE & VITE 阅读: 日期:2024-07-15
本文VUE案例3:点击激活列表选中高度状态,列表默认黑色,点击时呈现出红色。
效果如下:
实现思路:
1、使用v-for遍历数组生成多个li列表
2、同时获取数据和索引
3、使用@click绑定函数传入当前li的索引
4、在函数中将当前索引值赋值给currentIndex变量
5、使用:class添加样式
代码如下:
template
<template>
<div class="demo">
<ul>
<li v-for="(item, index) in films" @click="liClick(index)" :class="{ active: currentIndex == index }">{{ item }}
</li>
</ul>
</div>
</template>
script
<script>
export default {
data() {
return {
currentIndex: 0,
films: ["大话西游", "重庆森林", "海上钢琴师", "功夫"]
}
},
methods: {
liClick(index) {
this.currentIndex = index;
}
}
};
</script>
style
<style>
.demo ul li{
text-align: left;
}
.active {
color: red;
cursor: pointer;
}
</style>