vue hover事件

[jiaozitang]

<template>
  <div class="bg_cont">
    <div class="cont w_1200">
      <ul class="list_sm clearfix" id="more">
        <li class="first"
            @mouseover="change('info')"
            @mouseout="changeOut('info')"
            :class="{curr: info}">
          <i class="icon icon_01"><em></em></i>
          <strong>账号信息</strong>
          <p>是指您的游戏账号状态是否正常，账号信息和您真实的个人信息是否一致。</p>
        </li>
        <li @mouseover="change('active')"
            @mouseout="changeOut('active')"
            :class="{curr: active}">
          <i class="icon icon_02"><em></em></i>
          <strong>日常活跃</strong>
          <p>是指您玩游戏的时长、天数等，经常玩游戏可提升您的信用分。</p>
        </li>
        <li @mouseover="change('game')"
            @mouseout="changeOut('game')"
            :class="{curr: game}">
          <i class="icon icon_03"><em></em></i>
          <strong>游戏资产</strong>
          <p>是指您在游戏中的装备、道具、金币等游戏资产，资产越多，您的信用分将会越高。</p>
        </li>
        <li @mouseover="change('safe')"
            @mouseout="changeOut('safe')"
            :class="{curr: safe}">
          <i class="icon icon_04"><em></em></i>
          <strong>安全贡献</strong>
          <p>是指如果您积极参与游戏举报，并且举报确认是有效的（即官方审核后确认您举报的玩家确实存在作弊行为）将会增加您的信用分；但如果官方发现您存在恶意举报行为，将会降低您的信用分。</p>
        </li>
        <li @mouseover="change('punish')"
            @mouseout="changeOut('punish')"
            :class="{curr: punish}">
          <i class="icon icon_05"><em></em></i>
          <strong>作弊处罚</strong>
          <p>是指判断您过去一段时间内是否在游戏中有消极游戏行为（逃跑、挂机、骂人等）或者作弊行为导致被封号、被禁言、被禁止参加排位赛或者其他处罚，被游戏处罚将会降低你的信用分。</p>
        </li>
      </ul>
    </div>
  </div><!-- //bg_cont -->
</template>

<script>
    export default {
        name: "CreditIndexBgContent",
      data(){
          return{
            'info': false,
            'active': false,
            'game': false,
            'safe': false,
            'punish': false,
          }
      },
      methods:{
        change(item) {
            this[item] = true;
        },
        changeOut(item){
          this[item] = false;
        }
      }
    }
</script>

<style scoped>

</style>