vue鼠标移入改变字体颜色,移出恢复原来颜色

// @mouseover鼠标移入   @mouseleave鼠标移出
<template>
  <div>
    <p @mouseover="yr" @mouseleave="yc" :style="active">我是文字内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:''
    }
  },
  methods:{
    yr(){
      this.active="color:blue"
    },
    yc(){
      this.active =''
    }
  }
}
</script>

<style>
  p{
    color: red;
  }
</style>