W3Schools 線上編輯器 - W3Schools 教學

<!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>