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

前端之家收集整理的这篇文章主要介绍了vue实现添加标签demo示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本篇文章主要介绍vue添加标签,废话不多说了,下面上具体代码

效果如下:

html

ataname" v-on:click="showCataList($index)">{{item.name}}

<button v-on:click="hideDropmenu"><i class="red fa fa-close (alias)">
<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}}

js

ataname:[{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});
  }
}

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/42238.html

猜你在找的Vue相关文章