W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
  <title>Light Switch</title>
  <style>
    #app {
      border: dashed black 1px;
      display: inline-block;
      padding-bottom: 10px;
    }

#app > button {
      display: block;
      margin: auto;
    }

#lightDiv {
      position: relative;
      width: 150px;
      height: 150px;
    }

#lightDiv > img {
      position: relative;
      width: 100%;
      height: 100%;
    }

#lightDiv > div {
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      border-radius: 50%;
      background-color: yellow;
    }
  </style>
</head>
<body>

<h1>Example: Light Switch</h1>
<p>The v-on directive is used on the button tag to listen to the 'click' event. When the 'click' event occurs the 'lightOn' data property is toggled between 'true' and 'false', making the yellow div behind the lightbulb visible/hidden.</p>
<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Switch light</button>
</div>

</body>
</html>