上代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>iview example</title>
  6.     <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
  7.     <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
  8.     <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="app">
  12.     <Input v-model="value" placeholder="请输入..." style="width: 300px" @on-enter="handleAdd"></Input>
  13.     <Button icon="ios-plus-empty" type="dashed" size="big" @click="handleAdd" shape="circal">添加标签</Button>
  14.      <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">{{ item }}</Tag>
  15.     <Button size="big" @click="change" shape="circal">数组转化字符串</Button>
  16.     <Button size="big" @click="change1" shape="circal">字符串转化数组</Button>
  17.  
  18. </div>
  19. <script>
  20.     new Vue({
  21.         el: '#app',
  22.         data () {
  23.             return {
  24.                 count:[1,2,23],
  25.                 value:''
  26.             }
  27.         },
  28.         methods: {
  29.              handleAdd () {
  30.  
  31.                 if (this.value!=="") {
  32.                     this.count.push(this.value);
  33.                     this.value=""
  34.                 } else {
  35.                    this.$Message.info('不能为空');
  36.                 }
  37.             },
  38.             handleClose2 (event, name) {
  39.                 const index = this.count.indexOf(name);
  40.                 this.count.splice(index, 1);
  41.             },
  42.             change(){
  43.                 console.log(this.count.join(","));
  44.  
  45.             },
  46.             change1(){
  47.                 let string=this.count.join(",")
  48.                 console.log(string)
  49.                 console.log(typeof(string))
  50.                 let arry=string.split(",")
  51.                 console.log(typeof(arry))
  52.                 console.log(arry)
  53.                 console.log(typeof(this.count))
  54.             }
  55.         }
  56.     })
  57.   </script>
  58. </body>
  59. </html>

相关演示（翻墙可看）：youtube

iview中使用Tag时进行数据的变化和实现将输入内容转化为标签输出数组的更多相关文章

  1. 修正EasyUI的BUG——Form中存在FileBox时的数据载入错误

    使用EasyUI载入服务端返回的数据时经常使用 $('#fm').form('load', row); 实现,既方便又简洁,可是.当Form中包括有FileBox时,代码就会报错,经过跟踪发现.由于E ...

  2. WP 8.1 中挂起时页面数据保存方式

    1.保存到Applicaion Data配置信息中: 保存: private void testTB_TextChanged(object sender, TextChangedEventArgs e ...

  3. 数据库中无数据时查询数据为空，但出现空指针异常的解决方案（转载https://blueskator.iteye.com/blog/2096026）

    异常:java.lang.NullPointerException 解决方案: try{ hotelImageList = ihotelImgManager.query(hiqc); }catch(E ...

  4. WP 8.1 中挂起时页面数据保存方式(1)

    1.保存到Applicaion Data配置信息中: 保存: privatevoid testTB_TextChanged(object sender, TextChangedEventArgs e) ...

  5. ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...

  6. 在MyBatis中查询数据、涉及多参数的数据访问操作、插入数据时获取数据自增长的id、关联表查询操作、动态SQL、关于配置MyBatis映射没有代码提示的解决方案

    1. 单元测试 在单元测试中,每个测试方法都需要执行相同的前置代码和后置代码,则可以自定义2个方法,分别在这2个方法中执行前置代码和后置代码,并为这2个方法添加@Before和@After注解,然后, ...

  7. 在thinkphp5.0中调用ajax时， 返回的JSON 格式数据在html前台不能用时

    在thinkphp5.0中调用ajax时,如果控制器返回的数据为json格式,视图层接收到返回值即为json格式的数据,此时应该把 JSON 文本转换为 JavaScript 对象,方便调用.具体代码 ...

  8. Redis中如何保证数据库和缓存双写时的数据的一致性?

    简单的场景: 直接使用 1. 使用Cache Aside pattern 读取的时候,先读取缓存中是否有数据,缓存中没有数据,再去数据库中进行查询,查询出来以后,然后再存入到缓存中 更新的时候,先删除 ...

  9. 解决在mysql表中删除自增id数据后，再添加数据时，id不会自增1的问题

    https://blog.csdn.net/shaojunbo24/article/details/50036859 问题:mysql表中删除自增id数据后,再添加数据时,id不会紧接.比如:自增id ...

随机推荐

  1. Postgresql 9.6 搭建 异步流复制 和 同步流复制 详细教程

    Basic Replication If you’re feeling overwhelmed, try setting up a slave to see how easy it is! We’ll ...

  2. python 中为什么不需要重载

    函数重载主要是为了解决两个问题. (1)可变参数类型. (2) 可变参数个数. 另外,一个基本的设计原则是,仅仅当两个函数除了参数类型和参数个数不同以外,其功能是完全相同的,此时才使用函数重载,如果两 ...

  3. [Git01]Pro Git 第三章 分支 读书笔记

    [git]分支   Git 的分支模型称为“必杀技特性”,而正是因为它,将 Git 从版本控制系统家族里区分出来. Git 有何特别之处呢?Git 的分支可谓是难以置信的轻量级,它的新建操作几乎可以在 ...

  4. windows服务安装记录

    首先打开cmd. 进入这个地址 C:\Windows\Microsoft.NET\Framework\v4.0.30319 执行操作  InstallUtil.exe E:\QueueWinServi ...

  5. 巧用网页开发者工具F12 审查、修改元素、去除广告、屏蔽遮罩

    巧用网页开发者工具F12 审查.修改元素.去除广告.屏蔽遮罩 每当打开一个网页的时候,是否为页面有很多广告而烦恼:是否为要操作页面(例如观看超清视频),请先注册登录等等事情而麻烦:是否对网页加锁的视频 ...

  6. django系列7.2--django中的cookie和session基本操作,浏览器登陆验证的不同实现

    django中的cookie和session(02)–操作 一.Django中的cookie操作 ctrl + shift + del 是谷歌浏览器中清除页面缓存和cookie的快捷键 1.设置coo ...

  7. NOIP2012BLOCKADE贪心思想证明

    NOIP2012BLOCKADE贪心思想证明 这道题的做法是二分时间并检验这个时间是否可行.检验的方法要用到贪心思想. 对于不能到根结点的军队应该尽量向根结点走. 如果军队A能走到根结点但到根结点后剩 ...

  8. 初学python之路-day15

    一.生成器send方法 # send的工作原理 # 1.send发送信息给当前停止的yield # 2.再去调用__next__()方法,生成器接着往下指向,返回下一个yield值并停止 # 案例: ...

  9. 手把手教渗透测试人员打造.NET可执行文件

    在进行渗透测试的过程中,我们有时候会希望使用可执行文件来完成某些任务.最近,我们在测试过程中拿下了一个网站,从而获得了一次发动水坑攻击的机会. 原文地址:https://www.peew.pw/blo ...

  10. Nginx+SpringBoot搭建负载均衡

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...