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


Posted in Javascript onJanuary 21, 2017

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

效果如下:

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

html

<div id="app">
<div style="margin-bottom: 4px;">
  <span class="selectedItem" v-for="item in selectedItems">{{item.name}} <i class="red fa fa-close (alias)"
  v-on:click="deleteSelectedItem($index)"></i></span>
  <input v-model="inputItem" type="text" v-on:focus="showDropmenu" v-on:keyup.enter="addItem">
</div>
<div v-show="isShowDropmenu">
  <button v-for="item in cataName" v-on:click="showCataList($index)">{{item.name}}</button>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
基于Vue实现timepicker
Apr 25 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 #Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 #Javascript
Bootstrap框架安装使用详解
Jan 21 #Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 #Javascript
微信小程序 九宫格实例代码
Jan 21 #Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 #Javascript
巧用canvas
Jan 21 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php设计模式小结
2013/02/15 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python requests post多层字典的方法
2018/12/27 Python
python实现公司年会抽奖程序
2019/01/22 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
家具厂厂长岗位职责
2014/01/01 职场文书
初中科学教学反思
2014/01/21 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android