vue怎么插入接口demo_vue实现添加标签demo示例代码

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

效果如下：

html

{{item.name}}

v-on:click="deleteSelectedItem($index)">

{{item.name}}

{{one}}

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

}

}

});

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