Vue中给当前点击的li添加类名,移除兄弟元素类名的方法
要求:使用Vue语法知识实现以下功能,页面上有若干个li标签,每个li最开始都是蓝色不加粗的字体,当鼠标单击某个li时,该标签的文字呈现红色加粗样式。说实话,一开始看到这题,我太亲切了,用JQuery里面this.addClass('current').siblings().removeClass('current')一下不就搞定了吗?但是题目要拿Vue做,这可怎么办?诶,我还是想抱着试一试的状态
要求:使用Vue
语法知识实现以下功能,页面上有若干个li标签,默认第一个li文字呈现红色加粗样式,其余每个li最开始都是蓝色不加粗的字体,当鼠标单击某个li时,该标签的文字呈现红色加粗样式,其他li文字呈现蓝色不加粗样式。
说实话,一开始看到这题,我太亲切了,用JQuery里面this.addClass(‘current’).siblings().removeClass(‘current’)一下不就搞定了吗?
但是题目要拿Vue做,这可怎么办?诶,我还是想抱着试一试的状态,用我根深蒂固的MVC
思想,先拿到当前点击的对象再给对象添加类名,于是,有了下面的方案一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
.current {
color: red !important;
font-weight: bold !important;
}
.origin {
color: blue;
font-weight: normal;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<ul v-for='item in arr'>
<li @click='handlerLi($event)' :class='origin'>{{item.id}}------{{item.name}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
current:'current',
origin:'origin',
arr:[
{id:1,name:'尤雨溪'},
{id:2,name:'阮一峰'},
{id:3,name:'小芒果'}
]
},
methods: {
handlerLi(e) {
// console.log(e.target)
e.target.classList.add(this.current)
}
}
});
</script>
</body>
</html>
在第27行中,给handlerLi($event)
传了一个$event
参数,在第46行,通过e.target
获取到当前点击的哪个元素,从而给他添加类名,问题来了,点完当前li再点别的li原先那个li的高亮class我不会取消,所以我点了两下变成了这样:
点三下就这样:
这样的方法本身就没有运用Vue所提倡的MVVM
思想进行动态数据绑定,再加上实现不了我们的功能,所以我们只能改咯,那看一下方案二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
.current {
color: red !important;
font-weight: bold !important;
}
.origin {
color: blue;
font-weight: normal;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<ul v-for='(item,index) in arr'>
<li @click='handlerLi(index)' :class='{current:flag==index,origin}'>{{item.id}}------{{item.name}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
current:'current',
flag:0,
origin:'origin',
arr:[
{id:1,name:'尤雨溪'},
{id:2,name:'阮一峰'},
{id:3,name:'小芒果'}
]
},
methods: {
handlerLi(i) {
// console.log(i)
this.flag=i;
}
}
});
</script>
</body>
</html>
第27行和第47行的handlerLi()函数是最核心的代码:
我们把当前的index
作为参数传递给了handlerLi()
函数,他把当前的index动态绑定给this.flag
,那就只有在当前的li中,flag==index
才为true,所以当前被点击的licurrent:true
,高亮的类才生效。
这里插一句:第36行flag初始值得设为0,因为在页面还没被点击,要渲染页面时,也会判断flag==index,这是第一个index为0,所以第一个li高亮显示。
总结:
这个例子很好的用到了MVVM的思想
,你看,当我们数据flag是0(M层)时,V层用flag=0和index自动去做判断,第一行高亮;当点击li时,index发生改变,flag也发生改变,V层自动拿改变了的flag去做判断,当前行高亮。通过v-bind绑定class属性实现双向数据绑定。
更多推荐
所有评论(0)