Vue.js 移入mouseenter顯示當前內容

標籤：abs   滑鼠   mouse   enter   ret   組件   show   vue   logs   

樣式比較醜，勿噴！

滑鼠移到第二個，左邊背景就顯示當前內容。

滑鼠移到第三個，左邊背景就顯示當前內容。

如：

window.vue   組件：就是要顯示內容的組件。

<style scoped>  div{    /*width: 100px;*/    height: 20px;    background-color: #138a97;    color:#fff;    /*子絕父相定位*/    position: absolute;    bottom:0;    left:20px;  }</style><template>  <div>    <!--父組件傳給子組件的內容-->    {{content}}  </div></template><script>  export default {    data(){      return{      }    },//    父組件傳給子組件的內容    props:["content"]  }</script>

 

Hello.vue組件：

<template>  <div class="hello">    <ul>      <li v-for="(item,index) in list" v-on:mouseenter="aaa(index)">        {{item.id}}{{item.item}}        <!--若index == ishow，就添加該window組件-->        <window :content="content" v-if="index == ishow"></window>      </li>    </ul>  </div></template><script>//  引入window組件  import window from ‘./window.vue‘export default {  data () {    return {      content:"",      ishow:null,      list:[        {id:1,item:"男人歌"},        {id:2,item:"唱歌的孩子"},        {id:3,item:"失戀重修手冊"},        {id:4,item:"paper love"},        {id:5,item:"oops"},        {id:6,item:"wild one"},      ]    }  },  methods:{    aaa(index){      this.content = this.list[index].item      this.ishow = index    }  },  components:{//    子組件引入    window  }}</script><style scoped>  li{    list-style: none;    height:50px;    border:1px solid #2c3e50;    /*定位，顯示的內容才能出現才固定位置*/    position: relative;  }</style>

 

本人偷懶，用的是 vue-cli腳手架快速搭個架構，也就兩個vue而已。

 

 

Vue.js 移入mouseenter顯示當前內容