Vue中通過鼠標移入移出來添加或取消class樣式（active）

 基礎知識：

先寫一下vue中鼠標移入移出的基礎知識，移入的觸發事件是 @mouseenter，移出的觸發事件是@mouseleave，知道這兩個方法就簡單了

 

基礎知識的例子

<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit">
  <div class="indexItem">
    <span :title="item.name">{{item.name}}</span>
    <span class="mypor">
   <i class="icon" @mouseenter="enter(index)" @mouseleave="leave()"></i>
   <div v-show="seen&&index==current" class="index-show">
    <div class="tip_Wrapinner">{{item.det}}</div>
   </div>
  </span>
  </div>
</div> export default { data(){ return{ seen:false, current:0 } }, methods:{ enter(index){ this.seen = true; this.current = index; }, leave(){ this.seen = false; this.current = null; } } }

 

 

 

然后通過例子來講一下怎么通過鼠標的移入移出來添加和取消class樣式

 

1.首先HTML綁定事件,加入或者移出class為active

2.通過觸發不同的方法來修改dom的class名字，從而控制不同的樣式

 

例子

<template>
  <section class="p-10 cursor-pointer">
    <div @mouseenter="changeActive($event)" @mouseleave="removeActive($event)">
      <h1>HAPPY</h1>
    </div>
  </section>
</template>
<script> export default { data() {
 return {
 }; }, methods: { changeActive($event) { $event.currentTarget.className = 'active'; }, removeActive($event) { $event.currentTarget.className = ''; } } }; </script>

<style lang="scss"> .active { color: red;
  }
</style>

 

效果

 

 

 

 

 

 

上面的例子效果是鼠標移上去字體為紅色，移走以后恢復為黑色，跟JQuery的修改class道理是一樣的，這里只是簡單的例子，復雜的樣式，active樣式可以自己寫

 

 

 

 

 

嗯，就醬~~

 

 

參考https://www.jb51.net/article/146107.htm