一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-02-28 编辑:简简单单 来源:一聚教程网

效果如下:

html

 代码如下 复制代码

  {{item.name}}

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

  

  {{item.name}}

 

  

  

    {{one}}

  

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

      }

    }

热门栏目