
<!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
喜欢就支持一下吧
请登录后发表评论
注册