脚本宝典收集整理的这篇文章主要介绍了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});
            }
        }
    });

脚本宝典总结

以上是脚本宝典为你收集整理的vue 添加标签demo全部内容，希望文章能够帮你解决vue 添加标签demo所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。