介绍盘旋:,函数(指数){
console.log才能(指数);
美元才能(& # 39;ul 李# 39;).eq(索引). css ({
,,,& # 39;背景# 39;:,& # 39;# ccc # 39;
,,,& # 39;颜色# 39;:,& # 39;# fff& # 39;
})才能.siblings () . css ({
,,,& # 39;背景# 39;:,& # 39;# fff& # 39;
,,,& # 39;颜色# 39;:,& # 39;# 333 & # 39;
})才能
} .hoverBg {
,,背景:# ccc;
,,颜色:# fff;
}
.clickBg {
背景:才能,红色;
,,颜色:# fff;
} export default {
,,数据:函数(){
,,,return {
,,,,,itemArr:[& # 39;一个# 39;& # 39;b # 39;, & # 39; c # 39;, & # 39; d # 39;],
,,,,,hoverIndex:, 1,,//表示当前徘徊的是第几个li 初始为,1,或,null 不能为0,0表示第一个李
,,,,,clickIndex:, 1,,//表示当前点击的是第几个li 初始为,1,或,null 不能为0,0表示第一个李
,,,}
,,},
} @mouseover=癶overIndex =, index"
@click=癱lickIndex =, index" @mouseout=癶overIndex =, 1“ :类=皗& # 39;clickBg& # 39;:指数==clickIndex & # 39; hoverBg& # 39;:指数==hoverIndex}“ & lt; template>
& lt;才能ul 类=癷tem"比;
,,,& lt; li v=?项目,,指数),拷贝itemArr",:关键=癷ndex"
,,,,,:类=皗& # 39;clickBg& # 39;:指数==clickIndex & # 39; hoverBg& # 39;:指数==hoverIndex}“;
,,,,,@click=癱lickIndex =, index"
,,,,,@mouseover=癶overIndex =, index"
,,,,,@mouseout=癶overIndex =, 1“比;
,,,,,{{项}}
,,,& lt;/li>
& lt;才能/ul>
& lt;/template>
& lt; script>
,export default {
,,,数据:函数(){
,,,,return {
,,,,,,itemArr:[& # 39;一个# 39;& # 39;b # 39;, & # 39; c # 39;, & # 39; d # 39;],
,,,,,,hoverIndex:, 1,,//表示当前徘徊的是第几个li 初始为,1,或,null 不能为0,0表示第一个李
,,,,,,clickIndex:, 1,,//表示当前点击的是第几个li 初始为,1,或,null 不能为0,0表示第一个李
,,,,}
,,},
,}
& lt;/script>
& lt; style>
,.item {
,,,宽度:600 px;
,,,身高:60 px;
,}
李,.item {
,,,宽度:80 px;
,,,身高:60 px;
,,,行高:60 px;
,,,margin-left: 20 px;
,,,浮动:左;
,,,text-align:中心;
,,,光标:指针;
,}
,.hoverBg {
,,,背景:# ccc;
,,,颜色:# fff;
,}
,.clickBg {
,,,背景:红色;
,,,颜色:# fff;
,}
& lt;/style>
怎么在vue中利用v代表实现一个悬停点击效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<强> 1。给李来绑定盘旋事件
<代码> @mouseover=靶?索引),
<强> 2。在悬停函数内去操作dom eq选中当前徘徊的李去修改它的样式,兄弟姐妹()选中其他李的修改样式
<>强vue利用不同的类名来实现
首先写两个不同状态的样式
然后给两个状态绑定两个值
盘旋的时候让hoverIndex等于盘旋的李点击时候一样
鼠标移出又取消移出状态即让盘旋的李为1或空
然后利用hoverIndex和clickIndex来给李不同的类名实现效果
用的熟练了就可以做出更多的东西,不李同渲染不同的样式
全部代码如下:
关于怎么在vue中利用v代表实现一个悬停点击效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。
