Vue中实现点击当前行变色

  • Post author:
  • Post category:vue


  • 话不多说,先上效果

    在这里插入图片描述
  • 默认第一行为红色,当点击第二行的时候,只有第二行变为红色
  • 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;;
        }
    </style>
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="(item,index) in names" :class="{active:currentIndex === index}" @click="liClick(index)">{{item}}</li>
		</ul>
	</div>
	<!-- 引入Vue -->
	<script src="vue.js"></script>
	<script>
		const app = new Vue({
			el:"#app",
			data:{
				names:['xiaoqiao','xiaosheng','xiaonan'],
				currentIndex:0
			},
			methods:{
				liClick(index){
					this.currentIndex = index
				}
			}
		})
	</script>
</body>
</html>



版权声明:本文为yehuaner33原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。