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

總結

以上是生活随笔為你收集整理的vue的鼠标移入和移出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。