<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" :class="{active:index==currentIndex}" @click="changeColor(index)">
{{item}}</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
movies: ["你的时代,我的时代", "这个世界不看脸", "唐人街探案", "青春派"],
// 定义一个currentIndex来记录当前的颜色的改变
currentIndex: 0,
},
methods: {
changeColor(index) {
this.currentIndex = index;
}
}
})
</script>
vue实现点击变色的小功能
最新推荐文章于 2023-06-29 19:40:10 发布