<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>作业回顾</title>
<style type="text/css">
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" :class="{active: currentIndex === index}" @click="liClick(index)">{{index+1}}.{{item}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
currentIndex:0,
movies:['第一个电影','第二个电影','第三个电影','第四个电影','第五个电影']
},
methods:{
liClick(index){
this.currentIndex = index
}
}
})
</script>
</body>
</html>
单击列表中的元素变色
最新推荐文章于 2023-07-14 10:59:49 发布