vue的鼠标移入和移出

最新推荐文章于 2024-02-06 16:42:24 发布

weixin_30954265

最新推荐文章于 2024-02-06 16:42:24 发布

阅读量685

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lml-lml/p/8482301.html

版权

vue的鼠标移入和移出

需求（鼠标到预约二维码显示，预约添加背景色）

实现

<!--html部分-->
<ul class="person_list">  //五个li标签皆是循环渲染出来的
        <li class="item" v-for="(n,index) in 5">
                <div class="code-wrapper" v-show="index == showIndex">  //当俩个index相等的时候，二维码的图片显示
                    <img src="../assets/img/code.png" alt="" />
                </div>
                <img src="../assets/img/avator.png" alt="" />
                <span class="name">张某某</span>
                <span>从业三年</span>
                <span class="introduce">"保险传递着爱与责任，用专业中立的态度用心为您规划保险，是我们的爱和责任，保险让生活更美好"</span>
                <span class="yuyue" v-on:mouseover="showCode(index)" v-on:mouseleave="hideCode()">预约</span>  //预约的按钮上绑定了鼠标移入和鼠标移出的方法，
        </li>
</ul>
<!--vue的数据源部分-->
export default {
        name: 'service',
        data() {
            return {
                showIndex: null
            }
        },
        methods: {
            showCode(index) {
                this.showIndex = index;   //当showIndex和index相同二维码图片显示，为null时不显示
            },
            hideCode() {
                this.showIndex = null
            }
        }
    }
<!--css部分-->
.yuyue {
                    text-align: center;
                    margin: 0 auto;
                    color: #FFAE00;
                    border: 1px solid #FFAE00;
                    padding: 10px 15px;
                    width: 100px;
                    border-radius: 10px;
                    margin-top: 30px;
                    font-size: 16px;
                    cursor: pointer;
                    &:hover{   //这里就是鼠标划入添加背景色
                        color: #fff;
                        background: #FFAE00;
                    }
    }

转载于:https://www.cnblogs.com/lml-lml/p/8482301.html