#vue# 【六】 使用v-show达到鼠标移入移出，显示不同的文字

#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部分，可自行定义样式