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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 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中截取字符串支持utf-8
2007/01/18 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python中的一些陷阱与技巧小结
2015/07/10 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Django中的session用法详解
2020/03/09 Python
python RSA加密的示例
2020/12/09 Python
《鞋匠的儿子》教学反思
2014/03/02 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
计划生育责任书
2015/05/09 职场文书
孔子观后感
2015/06/08 职场文书
Python基础之元类详解
2021/04/29 Python
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL