vue图片点击超链接_vue使用v-for实现hover点击效果
使用Vue來實(shí)現(xiàn)鼠標(biāo)懸停效果。可以使用事件處理器v-on指令(簡寫為：@)來完成。為標(biāo)簽綁定mouseenter以及mouseleave事件即可。
hover是css中的選擇器，用于選擇鼠標(biāo)指針浮動在上面的元素。所以a:hover可用于設(shè)置當(dāng)鼠標(biāo)懸停在超鏈接之上時(shí)超鏈接的樣式。
在當(dāng)今比較流行的前端框架里 vue react 都是以數(shù)據(jù)驅(qū)動的形式來修改元素的狀態(tài), 而并非是之前使用jq來操作dom元素, 這樣效率也是非常低的, 像vue, react 都是以虛擬dom的形式渲染頁面, 以數(shù)據(jù)的變化來更新虛擬dom, 從而更新頁面.
jquery 來實(shí)現(xiàn)
1.給li來綁定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名來實(shí)現(xiàn)
首先寫兩個(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 來給li不同的class名 實(shí)現(xiàn)效果
:class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"
用的熟練了就可以做出更多的東西,不同li渲染不同的樣式
全部代碼如下:
:class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"
@click="clickIndex = index"
@mouseover="hoverIndex = index"
@mouseout="hoverIndex = -1">
{{item}}
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
}
},
}
.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;
}
總結(jié)
以上所述是小編給大家介紹的vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
總結(jié)
以上是生活随笔為你收集整理的vue图片点击超链接_vue使用v-for实现hover点击效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 邮件作为证据如何提交_电子邮件作为证据应
- 下一篇： html5倒计时秒杀怎么做,vue 设