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就不写了,很简单

最后来两张效果图对比一下:

移入前:

移入后: