vue实现列表点击变色

最新推荐文章于 2024-04-26 17:54:13 发布

天宇宇宇宇宇a

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量1.5k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44430547/article/details/106861054

版权

<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>

天宇宇宇宇宇a

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
vue实现列表点击变色

<style> .active{ color: red; } </style></head><body><div id="app">  <ul> <li @click="convert(index)" :class="{ active: index == changeIndex }" v-for="(item,index) in .
复制链接

扫一扫