04-vue动态绑定class实现点击变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>04-点击变色</title>
		<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.active{
			background-color: red;
		}
	</style>
	<body>
		<div id="box">
			<ul>
				<li v-for="(data,index) in datalist" :class="current === index?'active':'' " @click="handleClick(index)">
				{{data}}--{{index}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#box",
				data:{
					current:0,
					datalist: ['1111','2222','3333','4444']
				},
				methods:{
					handleClick(index){
						this.current = index
					}
				}
			})
		</script>
	</body>
</html>

代码说明:

在data中定义一个当前索引值current,初始值设置为0,即列表的第一个元素。

定义一个datalist数组用于渲染页面列表。

使用v-for遍历datalist渲染列表,使用:class动态绑定class,通过函数表达式判断current的值是否等于当前index索引值,相等的话将class赋值为active,不相等的话class为空。

通过@click绑定点击事件,并传入当前的index值,在handleClick函数中接收index,并将current赋值为index。

点击哪个li元素,就会将当前li的索引值传给handleClick函数,并将current赋值为index。

实现给当前li动态添加active的class值,当前元素增加背景色。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论