本篇文章给大家分享的是有关怎么在vue中添加标签demo,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
html
<div id="app"> <div > <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}); } } });
以上就是怎么在vue中添加标签demo,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。