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

樣式比較丑，勿噴！

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

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

如下圖：

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而已。