vue 添加标签demo

demo效果图

在线演示地址 http://wangduanduan.coding.me...

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