vue实现添加标签demo示例代码

本篇文章主要介绍vue添加标签，废话不多说了，下面上具体代码

效果如下：

html

<div id="app">
<div style="margin-bottom: 4px;">
 <span class="selectedItem" v-for="item in selectedItems">{{item.name}} <i class="red fa fa-close (alias)"
 v-on:click="deleteSelectedItem($index)"></i></span>
 <input v-model="inputItem" type="text" v-on:focus="showDropmenu" v-on:keyup.enter="addItem">
</div>
<div v-show="isShowDropmenu">
 <button v-for="item in cataName" v-on:click="showCataList($index)">{{item.name}}</button>

<button v-on:click="hideDropmenu"><i class="red fa fa-close (alias)"></i></button>
 <div v-for="item in cataList" v-show="item.isShow">
   <span v-for="one in item.items" class="item" v-on:click="addByClick(one)">{{one}}</span>
 </div>
</div>
</div>

js

new Vue({
   el:'#app',
   data:{
     selectedItems: [{
       name: 'NodeJs'
     }],
     isShowDropmenu: false,
     inputItem:'',
     cataName:[{name:'开发语法'}, {name: '系统设备'}],
     cataList:[{
       isShow: true,
       items:['js','c++','java']
     },{
       isShow: false,
       items:['windows','chrome','linux']
     }]
   },
   methods:{
     showDropmenu: function(event){
       console.log('showDropmenu');
       this.isShowDropmenu = true;
     },
     hideDropmenu: function(event){
       this.isShowDropmenu = false;
       console.log('hideDropmenu');
     },
     test: function(){
       console.log('test');
     },
     addItem: function(){
       this.selectedItems.push({name: this.inputItem});
       this.inputItem = "";
     },
     deleteSelectedItem: function(index){
       this.selectedItems.splice(index, 1);
     },
     showCataList: function(index){
       var i = this.cataList.length;

while(i--){
         i === index ? this.cataList[i].isShow = true: this.cataList[i].isShow = false;
       }
     },
     addByClick: function(name){

var i = this.selectedItems.length;
       while(i--){
         if(this.selectedItems[i].name === name){
           return;
         }
       }

this.selectedItems.push({name: name});
     }
   }
 });

来源：https://segmentfault.com/a/1190000008170838