vue实现添加标签demo示例代码
2017-01-21 14:33
721 查看
本篇文章主要介绍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}); } } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue实现动态添加数据滚动条自动滚动到底部的示例代码
- vue.js实现表格合并示例代码
- jquery 实现两Select 标签项互调示例代码
- 用vue的双向绑定简单实现一个todo-list的示例代码
- JS实现按钮添加背景音乐示例代码
- 基于Vue实现后台系统权限控制的示例代码
- div+css 实现tabs标签的示例代码
- 使用Bootstrap + Vue.js实现添加删除数据示例
- js实现网页的两个input标签内的数值加减(示例代码)
- JS实现动态给标签控件添加事件的方法示例
- MYSQL实现添加购物车时防止重复添加示例代码
- 利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
- Python实现自动添加脚本头信息的示例代码
- Android中封装RecyclerView实现添加头部和底部示例代码
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- jquery 实现两Select 标签项互调示例代码
- JavaScript实现url地址自动检测并添加URL链接示例代码
- javascript实现标签切换代码示例
- Android中RecyclerView实现Item添加和删除的代码示例
- vue与bootstrap实现时间选择器的示例代码