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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
  <div id="app">
  <!-- Vue 渲染的目標範圍 -->
    <div class="block" id="b1">
      <div v-for="i in block1" class="btn" @click="changValue(block1, i)">{{i}}</div>
    </div>
    <div class="block" id="b2">
      <div v-for="i in block2" class="btn" @click="changValue(block2, i)">{{i}}</div>  
    </div>
  </div>
  <script>
      // 用來初始化 Vue 實例
      const vm = new Vue({
        el: '#app',
        // 初始資料
        data: {
          block1 : [],
          block2 : ["1", "a", "c"],
        },
        methods: {
          changValue(b, i){
            let currentBlock
            let anotherBlock
            if (this.block1 === b){
              currentBlock = this.block1
              anotherBlock = this.block2
            } else if (this.block2 === b){
              currentBlock = this.block2
              anotherBlock = this.block1
            }
            currentBlock.splice(currentBlock.indexOf(i),1)
            anotherBlock.push(i)
          }
        }
      })
  </script>
</body>
</html>
<style>
  .block{
    min-height: 100px;
    border: 1px solid black;
  }
  
  #b1{
    background-color: lightblue;
  }
  #b2{
    background-color: pink;
  }
  .btn{
    display: inline-block;
    border:1px solid black;
    padding: 4px;
    margin: 5px
  }
</style>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers