#vue# 使用v-show达到鼠标移入移出,显示不同的文字
思路:
(1)首先写好框架,将两段文字都写出来,
然后通过v-show,定义好各自的变量
<div class="economics-one-card" @mouseover="getShow()" @mouseleave="getOff()">
<p v-show="onShow">新青年,贪安稳就没有新自由</p>
<p v-show="offShow">最愿青年都能摆脱冷气,只是向上走,不必听自暴自弃者的话...</p>
</div>
(2)在data-----return里面,将设置好的变量写进去,
同时设置两个p标签的初始化状态(显示或者隐藏)
data() {
return {
onShow:'true',
offShow:'false',
}
}
(3)然后在包着这两个p标签的父盒子处,
绑定鼠标移入以及移出的事件
<div class="economics" @mouseover="getShow()" @mouseleave="getOff()">
</div>
(4)最后写方法,当鼠标移入时,
this.变量(就是return里面的变量) = 布尔值;
进行状态切换
methods:{
getShow() {
this.onShow = false;
this.offShow = true;
},
getOff() {
this.onShow = true;
this.offShow = false;
}
}
完整的demo代码如下:
<div class="economics-one-card" @mouseover="getShow()" @mouseleave="getOff()">
<p v-show="onShow">新青年,贪安稳就没有新自由</p>
<p v-show="offShow">最愿青年都能摆脱冷气,只是向上走,不必听自暴自弃者的话...</p>
</div>
<script>
export default {
name: "economics",
data() {
return {
onShow:'true',
offShow:'false',
}
},
methods:{
getShow() {
this.onShow = false;
this.offShow = true;
},
getOff() {
this.onShow = true;
this.offShow = false;
}
}
</script>
css部分,可自行定义样式