@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"
      console.log("进来")
    },
    yc(){
      this.active =''
      console.log("出来")
    }
  }
}
</script>
 
<style>
  p{
    color: red;
  }
</style>

我试了一下没问题啊

https://codepen.io/guyu521/pen/dymMNyO

移动端用
ontouchstart 手指按下触发
ontouchmove 手指移动触发
onTouchend 手指抬起触发

你可以这样写动态样式

<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</span>