Vue练习五:01_05_鼠标移入改变样式鼠标移出恢复
Demo 在线地址:
https://sx00xs.github.io/test/5/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template> <div id="app"> <div class="div1" :class="{hover:isHover}" @mouseover="handleMouseover" @mouseout="handleMouseOut" >鼠标移入改变样式,鼠标移出恢复。</div> </div> </template> <script> export default { data:function(){ return{ isHover:false } }, methods:{ handleMouseover(){ this.isHover=true }, handleMouseOut(){ this.isHover=false } } } </script>