Vue练习五：01_05_鼠标移入改变样式鼠标移出恢复

<template>
  <div id="app">
    <div class="div1" :class="{hover:isHover}"
    @mouseover="handleMouseover"
    @mouseout="handleMouseOut"
    >鼠标移入改变样式，鼠标移出恢复。</div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      isHover:false
    }
  },
  methods:{
    handleMouseover(){
      this.isHover=true
    },
    handleMouseOut(){
      this.isHover=false
    }
  }
}
</script>