当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现添加标签demo示例代码

vue实现添加标签demo示例代码

2018年05月07日  | 移动技术网IT编程  | 我要评论

本篇文章主要介绍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});
      }
    }
  });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网