vue-q1

by Yin Yanjun

HTML

<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="app">
  <div class="row">
    <div class="col-xs-5">
      <select name="" id="" multiple v-model="c1checked" class="form-control">
          <option :value="c.id" v-for="c in c1">{{ c.name }}</option>
      </select>
    </div>
    <div class="col-xs-2">
      <button @click="check">=></button>
    </div>
    <div class="col-xs-5">
      <select name="" id="" multiple class="form-control">
          <option :value="c.id" v-for="c in c2">{{ c.name }}</option>
      </select>
    </div>
  </div>
  <div>
    <table class="table table-hover table-striped">
      <tr v-for="c in c2">
        <td>{{ c.name }}</td>
        <td>...</td>
        <td>
          <input type="text" class="form-control input-sm">
        </td>
        <td>
          <input type="text" class="form-control input-sm">
        </td>
        <td>预览</td>
      </tr>
    </table>
  </div>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    c1checked: [],
    c1: [{
      id: 1,
      name: '招商银行'
    }, {
      id: 2,
      name: '工商银行'
    }, {
      id: 3,
      name: '农业银行'
    }],
    c2: []
  },
  methods: {
    check: function() {
      var that = this;
      this.c1.forEach(function($item) {
        if ($.inArray($item.id, that.c1checked) != -1) {
          that.c2.push($item);
        }
      });
      this.c1 = this.c1.filter(function($item) {
        return $.inArray($item.id, that.c1checked) == -1;
      });
      this.c1checked = [];
    }
  }
});