欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果

 更新時(shí)間:2018年09月29日 16:31:01   作者:會(huì)游泳de哈士奇  
hover是css中的選擇器,用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了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實(shí)現(xiàn)拖拽交換位置

    vue實(shí)現(xiàn)拖拽交換位置

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽交換位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue組件懶加載的操作代碼

    Vue組件懶加載的操作代碼

    在本文中,我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見(jiàn)時(shí)對(duì)其進(jìn)行懶加載,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友一起看看吧
    2023-09-09
  • 淺談 Vue v-model指令的實(shí)現(xiàn)原理

    淺談 Vue v-model指令的實(shí)現(xiàn)原理

    vue的v-model是一個(gè)十分強(qiáng)大的指令,它可以自動(dòng)讓原生表單組件的值自動(dòng)和你選擇的值綁定,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • 將Vue組件庫(kù)更換為按需加載的方法步驟

    將Vue組件庫(kù)更換為按需加載的方法步驟

    這篇文章主要介紹了將Vue組件庫(kù)更換為按需加載的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • 教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能

    教你在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
  • vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法

    vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法

    這篇文章主要介紹了vue中上傳視頻或圖片或圖片和文字一起到后端的解決方法,需要的朋友可以參考一下
    2019-12-12
  • 詳解如何寫(xiě)出一個(gè)利于擴(kuò)展的vue路由配置

    詳解如何寫(xiě)出一個(gè)利于擴(kuò)展的vue路由配置

    這篇文章主要介紹了詳解如何寫(xiě)出一個(gè)利于擴(kuò)展的vue路由配置,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-05-05
  • 詳解Vue與VueComponent的關(guān)系

    詳解Vue與VueComponent的關(guān)系

    這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-12-12
  • vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單方法詳解

    vue-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
  • Element el-menu中NavMenu的用法

    Element el-menu中NavMenu的用法

    今天封裝一個(gè)導(dǎo)航欄的組件,使用的Element的NavMenu組件。遇到一個(gè)問(wèn)題,本文主要介紹了Element el-menu中NavMenu的用法,感興趣的可以了解一下
    2023-04-04

最新評(píng)論