vue實作移入移出事件

移入顯示,移出隐藏,廢話不多說直接上代碼

<ul class="tab-ul">
  <li v-for="(item, index) in labelShows" :key="index" @mouseenter="enter(index)" @mouseleave="leave()">
    <router-link :to="{name: 'topic', query:{id:item.id}}"  class="newIndex-hotpic">
      <img :src="'http://192.168.0.123:8000' + item.master_img" :alt="item.title">
      <span v-show="seen&&index==current" class="newIndex-textItem" v-text="item.title"></span>
    </router-link>
  </li>
</ul>      

js

export default{
    name: 'App',
    data(){
        labelShows: [],
        seen: false,
        current: 0
    }
    mounted () {
        this.$axios.get(this.HOST + 'api/')
        .then(res => {
            this.filterData(res.data);
        })
        .catch(error => {
            console.log(error)
        })
    },
    methods: {
        // 周遊請求的内容
        filterData(data){
            var labelShow = []
            for(var i=0; i<data.labelShowData.length; i++){
                var labelShowObj = {
                    id: data.labelShowData[i].id,
                    title:data.labelShowData[i].title,
                    master_img: data.labelShowData[i].master_img,                       
                }
                labelShow.push(labelShowObj);
                // this.hotTopics.push(mapterObj)
            }
            this.labelShows = labelShow;
        },
        enter(index){
            this.seen = true;
            this.current = index;
        },
        leave(){
            this.seen = false;
            this.current = null;
        }
}      

這裡css就不寫了,很簡單

最後來兩張效果圖對比一下:

移入前: