vue的hover事件

4年以前  |  阅读数:703 次  |  编程语言:JavaScript 
<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>

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令(简写为:@)来完成。为标签绑定mouseenter以及mouseleave事件即可。

 相关文章:
PHP分页显示制作详细讲解
SSH 登录失败:Host key verification failed
将二进制数据转为16进制以便显示
获取IMSI
获取IMEI
Java生成UUID
PHP自定义函数获取搜索引擎来源关键字的方法
让你成为最历害的git提交人
在Zeus Web Server中安装PHP语言支持
再谈PHP中单双引号的区别详解
指定应用ID以获取对应的应用名称
Yii2汉字转拼音类的实例代码
Python 2与Python 3版本和编码的对比
php+ajax+json 详解及实例代码
php封装的page分页类完整实例
PHP设计模式之工厂模式与单例模式
php数组合并array_merge()函数使用注意事项
PHP实现简单爬虫的方法
php实现数组中索引关联数据转换成json对象的方法
wget使用技巧