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

來源:互聯網
上載者:User

標籤: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顯示當前內容

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。