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

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

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

效果如下：

html

{{item.name}}

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

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',IshVRnpfrY'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 IshVRnpfrY? 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.selectedIhttp://tems.push({name: name});

}

}

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。