最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue实现添加标签demo示例代码
时间:2017-02-28 编辑:简简单单 来源:一聚教程网
效果如下:
html
代码如下 | 复制代码 |
v-on:click="deleteSelectedItem($index)"> |
js
代码如下 | 复制代码 |
newVue({ 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){ vari =this.cataList.length;
while(i--){ i === index ?this.cataList[i].isShow =true:this.cataList[i].isShow =false; } }, addByClick:function(name){
vari =this.selectedItems.length; while(i--){ if(this.selectedItems[i].name === name){ return; } }
this.selectedItems.push({name: name}); } } |
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31