vue的鼠標移入和移出

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;}}