github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/vue-1.0.24/examples/select2/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3    <head>
     4      <meta charset="utf-8">
     5      <title>Vue.js custom directive integration example (select2)</title>
     6      <script src="../../dist/vue.js"></script>
     7      <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
     8      <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet">
     9      <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    10      <style>
    11        select {
    12          min-width: 300px;
    13        }
    14      </style>
    15    </head>
    16    <body>
    17  
    18      <div id="el">
    19        <p>Selected: {{selected}}</p>
    20        <select v-select="selected" :options="options">
    21          <option value="0">default</option>
    22        </select>
    23      </div>
    24  
    25      <script>
    26      Vue.directive('select', {
    27        twoWay: true,
    28  
    29        params: ['options'],
    30  
    31        bind: function () {
    32          var self = this
    33          $(this.el)
    34            .select2({
    35              data: this.params.options
    36            })
    37            .on('change', function () {
    38              self.set(this.value)
    39            })
    40        },
    41        update: function (value) {
    42          $(this.el).val(value).trigger('change')
    43        },
    44        unbind: function () {
    45          $(this.el).off().select2('destroy')
    46        }
    47      })
    48  
    49      var vm = new Vue({
    50        el: '#el',
    51        data: {
    52          selected: 0,
    53          options: [
    54            { id: 1, text: 'hello' },
    55            { id: 2, text: 'what' }
    56          ]
    57        }
    58      })
    59      </script>
    60    </body>
    61  </html>