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>