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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
Js apply方法详解
Feb 16 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
微信小程序 数据交互与渲染实例详解
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
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
封装html的select标签的js操作实例
2013/07/02 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
详解Python发送email的三种方式
2018/10/18 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
文明寄语大全
2014/04/11 职场文书
机械系毕业生求职信
2014/05/28 职场文书
先进工作者申报材料
2014/12/23 职场文书
邀请函怎么写
2015/01/30 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
小学毕业感言200字
2015/07/30 职场文书
礼仪培训心得体会
2016/01/22 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Java后台生成图片的完整步骤
2021/08/04 Java/Android