<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--点击列表中的哪一项,该项文字变为红色-->
<ul>
<li @click="convert(index)" :class="{ active: index == changeIndex }"
v-for="(item,index) in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: [
'盗梦空间',
'火星救援',
'星际穿越'
],
changeIndex: 0
},
methods: {
convert: function (index) {
console.log(index);
this.changeIndex = index
}
}
})
</script>
vue实现列表点击变色
最新推荐文章于 2024-06-30 11:06:07 发布