首页 / 脚本样式 / JavaScript / vue实现添加标签demo示例代码

<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>

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}）;}}}）;