Vue.jsで作るタグ入力フォーム ref: http://qiita.com/tomato360/items/48ffd92921e8528dad35

file0.html

<div class="text-area">
  <div class="tag-list">
    <span class="tag" v-for="tag in tags">
      {{tag.name}}
      <span class="delete" v-on:click="delete(this)">x</span>
    </span>
  </div>
  <div class="input-area" contenteditable=true v-on:keydown.enter="decide_tag">
  </div>
</div>

file1.css

.text-area{
  width: auto;
  height: 20px;
  background: white;
}

.tag-list{
  display: inline-block;
  margin-top: 0px;
}

.input-area{
  display: inline-block;
  width: 100px;
  height: 20px;
  background: white;
  &:focus{
    outline: 0;
  }
}

.tag {
  padding: 2px;
  background: yellow;
}

.delete {
  cursor: pointer;
}

file2.js

$(document).ready(function() {
  var tag = new Vue({
    el: ".text-area",
    data: {
      tags: []
    },
    methods: {
      decide_tag: function(e) {
        this.tags.push({
          name: e.target.textContent
        });
        e.target.textContent = "";
      },
      delete: function(vm) {
        this.tags.splice(vm.$index,1);
      }
    }
  });
});