Vue implements demo code for adding tags, and vue sample code
This article mainly introduces how to add vue labels. The code below is not enough.
The effect is as follows:
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: 'Development syntaxes '}, {name: 'System device'}], cataList: [{isShow: true, items: ['js ', 'C ++ ', 'java']}, {isShow: false, items: ['windows', 'chromi', 'linux']}, methods: {showDropmenu: function (event) {console. log ('showdropmenu'); this. isShowDropmenu = true;}, hideDropmenu: function (event) {this. isShowDr Opmenu = false; console. log ('hidropmenu');}, 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 });}}});
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.