Vue.js 移入mouseenter顯示當前內容
阿新 • • 發佈:2017-07-21
his -- span 出現 paper 分享 位置 div osi
樣式比較醜,勿噴!
鼠標移到第二個,左邊背景就顯示當前內容。
鼠標移到第三個,左邊背景就顯示當前內容。
如下圖:
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顯示當前內容