vue的hover事件

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/sunshine_ping/article/details/80269707

<template>
  <div>
    <ul>
      <template v-for="(item) in items">
        <li @mouseover="selectStyle (item) "
            :class="{'active':item.active}" 
            @mouseout="outStyle(item)">
          {{item.select}}
          <span class="icon" v-show="item.active">{{item.icon}}</span>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        active: false,
        items: [
          {select:'第一行',icon:1},
          {select:'第二行',icon:2},
          {select:'第三行',icon:3},
          {select:'第四行',icon:4}
        ]
      }
    },
    methods: {
      selectStyle (item) {
        var _this=this;
        this.$nextTick(function () {
          this.items.forEach(function (item) {
            _this.$set(item,'active',false);
          });
          this.$set(item,'active',true);
        });
      },
      outStyle (item) {
        this.$set(item,'active',false);
      }
    }
  }
</script>

<!-- 樣式 -->
<style scoped>
  ul{
    overflow: hidden;
  }
  li{
    float: left;
    color:#000; 
    transition: width .3s linear;
    outline: 1px solid red;
  }
  .active{
    color: red;
    background: chartreuse; 
  }
  .icon{
    float: right;
    font-size: 12px;
  }
</style>

 

————————————————
版權聲明：本文為CSDN博主「sunshine_ping」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sunshine_ping/article/details/80269707