VueJs初学者のちょっとした倉庫です。簡単だけどシンプルだけど使えそうな表現を目指しています。
カーソルが要素に重なると文字が拡大され、選択された値を取得する
←気が向いたらLGTMボタンぽちっとお願いします。
カーソルが要素に重なると拡大され、要素の値を取得します。
画面左下がカーソルが重なっている値です。取得した値によってわんちゃんの画像を表示するとかよさそうですね。今回は柴犬にカーソルが重なると画像が表示されるようになっています。
追記：それっぽい犬図鑑つくりました→https://qiita.com/Itsuki_Y/items/288143a97ae2ad5224ca
ソース
shuffle.html
<!doctype html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>PickUp</title><style>body{font-family:"Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;}ul{margin-left:700px;list-style:none;}div#mainlist{color:#8EF1FF;font-size:25px;}div#mainlistulli:hover{list-style-type:">";color:#7B3CFF;font-size:75px;}.SubTitle{margin-left:700px;position:relative;display:inline-block;font-weight:bold;padding:0.25em0;text-decoration:none;color:#67c5ff;}.SubTitle:before{position:absolute;content:'';width:100%;height:4px;top:100%;left:0;border-radius:3px;background:#67c5ff;transition:.2s;}.SubTitle:hover:before{top:-webkit-calc(100%-3px);top:calc(100%-3px);}</style></head><body><divid="app"><h1><divclass="SubTitle">あなたの好きな犬種は？？</div><divid="mainlist"><ul><liv-for="dog in dogs":key="dog.name"@mouseover="activeDog=dog.name">
{{dog.name}}
</li><imgv-show="this.activeDog=='柴犬'"src="sibainu.png"></img></ul></div></h1><pv-show="activeDog">selected:{{activeDog}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script><script>varapp=newVue({el:"#app",data:{dogs:[{name:'チワワ'},{name:'トイプードル'},{name:'ポメラニアン'},{name:'柴犬'},{name:'ダックスフンド'},{name:'パグ'},{name:'ブルドック'},{name:'コーギー'},{name:'パピヨン'},{name:'マルチーズ'},{name:'シェパード'},{name:'ブルドッグ'},{name:'プードル'},{name:'ラブラドール'},{name:'ビーグル'},{name:'ゴールデンレトリバー'},{name:'ラブラドールレトリバー'},{name:'秋田犬'},],activeDog:""},methods:{}});</script></body></html>最後に
以上です。気が向いたらLGTMぽちっとお願いします。