Vue

HTML

<div id="app">
  現出原形<input type="checkbox" v-on:change="is_shown=!is_shown" v-bind:checked="is_shown"><br/>
  <div id="container">
    <div id="trap"></div>
    <iframe :src="url" frameborder="0" id="like_button" :class="{hidden:!is_shown}"></iframe>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#container {
  position: relative;
  height: 200px;
}

#trap{
  top: 40px;
  width: 80px;
  height: 80px;
  background-color: red;
  position: absolute;
  border-radius: 100%;
}

#like_button {
  height: 230px;
  width: 500px;
  position: absolute;
  left: -304px;
  z-index: 99;
}

.hidden {
  opacity: 0;
}

Vue

new Vue({
  el: "#app",
  data: {
    is_shown: false,
    url: "https://button.like.co/in/embed/catding/button?type=wp&referrer=https%3A%2F%2Fwww.wtf.com%2F1"
  }
})