vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果
使用Vue來(lái)實(shí)現(xiàn)鼠標(biāo)懸停效果??梢允褂檬录幚砥鱲-on指令(簡(jiǎn)寫(xiě)為:@)來(lái)完成。為標(biāo)簽綁定mouseenter以及mouseleave事件即可。
hover是css中的選擇器,用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。所以a:hover可用于設(shè)置當(dāng)鼠標(biāo)懸停在超鏈接之上時(shí)超鏈接的樣式。
在當(dāng)今比較流行的前端框架里 vue react 都是以數(shù)據(jù)驅(qū)動(dòng)的形式來(lái)修改元素的狀態(tài), 而并非是之前使用jq來(lái)操作dom元素, 這樣效率也是非常低的, 像vue, react 都是以虛擬dom的形式渲染頁(yè)面, 以數(shù)據(jù)的變化來(lái)更新虛擬dom, 從而更新頁(yè)面.
jquery 來(lái)實(shí)現(xiàn)
1.給li來(lái)綁定hover事件
@mouseover="hover(index)"
2.在hover函數(shù)內(nèi)去操作dom eq選中當(dāng)前hover的li去修改它的樣式, siblings()選中其他的li修改樣式
hover: function(index){ console.log(index); $('ul li').eq(index).css({ 'background': '#ccc', 'color': '#fff' }).siblings().css({ 'background': '#fff', 'color': '#333' }) }
vue 利用不同的class名來(lái)實(shí)現(xiàn)
首先寫(xiě)兩個(gè)不同狀態(tài)的樣式
.hoverBg{ background: #ccc; color: #fff; } .clickBg{ background: red; color: #fff; }
然后給兩個(gè)狀態(tài)綁定兩個(gè)值
export default { data: function(){ return { itemArr:['A','B','C','D'], hoverIndex: -1, //表示當(dāng)前hover的是第幾個(gè)li 初始為 -1 或 null 不能為0 0表示第一個(gè)li clickIndex: -1, //表示當(dāng)前點(diǎn)擊的是第幾個(gè)li 初始為 -1 或 null 不能為0 0表示第一個(gè)li } }, }
hover的時(shí)候讓hoverIndex等于hover的li,點(diǎn)擊時(shí)候一樣
@mouseover="hoverIndex = index" @click="clickIndex = index"
鼠標(biāo)移出又取消移出狀態(tài) 即讓hover的li為 -1 或 null
@mouseout="hoverIndex = -1"
然后利用 hoverIndex 和 clickIndex 來(lái)給li不同的class名 實(shí)現(xiàn)效果
:class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"
用的熟練了就可以做出更多的東西,不同li渲染不同的樣式
全部代碼如下:
<template> <ul class="item"> <li v-for="(item, index) in itemArr" :key="index" :class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}" @click="clickIndex = index" @mouseover="hoverIndex = index" @mouseout="hoverIndex = -1"> {{item}} </li> </ul> </template> <script> export default { data: function(){ return { itemArr:['A','B','C','D'], hoverIndex: -1, //表示當(dāng)前hover的是第幾個(gè)li 初始為 -1 或 null 不能為0 0表示第一個(gè)li clickIndex: -1, //表示當(dāng)前點(diǎn)擊的是第幾個(gè)li 初始為 -1 或 null 不能為0 0表示第一個(gè)li } }, } </script> <style> .item{ width: 600px; height: 60px; } .item li{ width: 80px; height: 60px; line-height: 60px; margin-left: 20px; float: left; text-align: center; cursor: pointer; } .hoverBg{ background: #ccc; color: #fff; } .clickBg{ background: red; color: #fff; } </style>
總結(jié)
以上所述是小編給大家介紹的vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
淺談 Vue v-model指令的實(shí)現(xiàn)原理
vue的v-model是一個(gè)十分強(qiáng)大的指令,它可以自動(dòng)讓原生表單組件的值自動(dòng)和你選擇的值綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06詳解如何寫(xiě)出一個(gè)利于擴(kuò)展的vue路由配置
這篇文章主要介紹了詳解如何寫(xiě)出一個(gè)利于擴(kuò)展的vue路由配置,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單方法詳解
vue-element-admin后臺(tái)管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下2023-09-09