VUE在页面使用h1显示 百知科技 四个字,鼠标移入颜色变绿,鼠标移出颜色变红
时间: 2023-06-27 14:01:26 浏览: 114
鼠标经过文字变色
5星 · 资源好评率100%
你可以使用Vue的绑定语法和样式绑定来实现这个效果。具体代码如下:
```html
<template>
<h1 :style="{ color: textColor }" @mouseover="textColor='green'" @mouseout="textColor='red'">百知科技</h1>
</template>
<script>
export default {
data() {
return {
textColor: 'red'
}
}
}
</script>
<style>
h1 {
cursor: pointer;
}
</style>
```
首先,在`<h1>`标签上绑定了`style`属性,使用`:style`语法。在`data`中定义了`textColor`变量来控制文字颜色。初始化为红色。
然后,在`<h1>`标签上绑定了`@mouseover`和`@mouseout`事件,当鼠标移入和移出时,通过修改`textColor`变量的值来改变文字颜色。
最后,在样式中设置了鼠标指针为手型,让用户知道这个文字可以点击和交互。
阅读全文