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