vue实现移入移出事件
本文转载从 https://blog.csdn.net/qq_42543264/article/details/102987056
移入显示,移出隐藏,废话不多说直接上代码
重点: seen&&index==current
<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;
}
}