Vue语法之v-for与v-bind结合

我心向阳.

已于 2022-05-19 19:56:49 修改

阅读量952

点赞数 1

文章标签： vue.js

于 2022-05-19 19:31:25 首次发布

本文链接：https://blog.csdn.net/Mr_xiaoxuboke/article/details/124869756

版权

本文介绍了在Vue.js中如何通过v-for指令动态改变列表项的高亮状态。方法一是利用v-bind绑定class，通过点击事件获取索引并更新currentIndex，使对应索引的列表项变红。方法二是使用三元运算符动态绑定class，根据索引与currentIndex的比较来切换样式。示例代码详细展示了这两种实现方式。

摘要由CSDN通过智能技术生成

说明:

方法一： v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。

方法二：在动态绑定class对象使用了三元表达式，其他都和方法一一样，使用三元表达式判断索引是否等于当前元素的索引，如果是返回style定义好的样式，否则为空，也就是变回原样。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="app">
			<!-- 方法一：对象写法 -->
			<ul>
				<li v-for="(item,index) in movies" :key="index" :class="{active:index==currentIndex}" @click = "changeColor(index)">{{index}}--{{item}}</li>
			</ul>
			
			<!-- 方法二：三元表达式写法 -->
			<ul>
				<li v-for="(item,index) in movies" :key="index" :class="index==currentIndex?'active':''" @click = "changeColor(index)">{{index}}--{{item}}</li>
			</ul>
		</div>
		
		<script src="vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'.app',
				data(){
					return{
						currentIndex : 0,
						movies:['海贼王','火影忍者','七龙珠','复仇者联盟']
					}
				},
				
				methods:{
					changeColor(index){
						console.log(index);
						this.currentIndex = index
					}
				}
			})
		</script>
	</body>
</html>