Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <div id="app">
    <input type="checkbox" v-model="isShow">
    <transition enter-active-class="bounceInLeft" leave-active-class="bounceOutLeft">
      <div v-if="isShow"> this is show</div>
    </transition>
    <hr>
    <!--下面是簡單的新增部份-->
    <input type="text" v-model="name" />
    <button @click="add">add</button>
    <transition-group name="fadeLeft" tag="ul">
      <li v-for="item in items" v-bind:key="item">
        {{ item }}
      </li>
    </transition-group>
  </div>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        isShow: true,
        items: ['anson', 'anson1', 'anson2'],
        name: ''
      },
      methods: {
        add() {
          this.items.push(this.name)
          this.name = ''
        }
      }
    })
  </script>
</body>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers