上代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>iview example</title>

    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>

    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>

</head>

<body>

<div id="app">

    <Input v-model="value" placeholder="请输入..." style="width: 300px" @on-enter="handleAdd"></Input>

    <Button icon="ios-plus-empty" type="dashed" size="big" @click="handleAdd" shape="circal">添加标签</Button>

     <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">{{ item }}</Tag>

    <Button size="big" @click="change" shape="circal">数组转化字符串</Button>

    <Button size="big" @click="change1" shape="circal">字符串转化数组</Button>

</div>

<script>

    new Vue({

        el: '#app',

        data () {

            return {

                count:[1,2,23],

                value:''

            }

        },

        methods: {

             handleAdd () {

                if (this.value!=="") {

                    this.count.push(this.value);

                    this.value=""

                } else {

                   this.$Message.info('不能为空');

                }

            },

            handleClose2 (event, name) {

                const index = this.count.indexOf(name);

                this.count.splice(index, 1);

            },

            change(){

                console.log(this.count.join(","));

            },

            change1(){

                let string=this.count.join(",")

                console.log(string)

                console.log(typeof(string))

                let arry=string.split(",")

                console.log(typeof(arry))

                console.log(arry)

                console.log(typeof(this.count))

            }

        }

    })

  </script>

</body>

</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. c#格式化字符

    1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:￥0.20 (英文操作系统结果:$0 ...

  2. CentOS 7上搭建Docker环境

    一.Docker介绍和安装 http://linux.cn/article-4340-1.html Docker 是一个开源工具,它可以让创建和管理 Linux 容器变得简单.容器就像是轻量级的虚拟机 ...

  3. C# 调用Delphi dll

    delphi dll 源码: library dllres; type char10 = ..] of char; TMydata = packed record id: Integer; name: ...

  4. vscode怎样新建项目

    首先,vscode本身没有新建项目的选项,所以要先创建一个空的文件夹喔.   然后打开vscode,再在vscode里面打开文件夹,这样才可以创建项目.   选择之前创建的空文件将作为vscode的文 ...

  5. 决定以后再做公司的项目的时候，能够用其他语言的绝对不用delphi

    1.delphi7的IDE真的很不友好 2.delphi7的控件有的有问题 3.delphi7居然不支持结构体的泛型存储 4.网上的解决文档超少,一些小bug,就要折腾半天 5.pascal语法太过结 ...

  6. ClamAV学习【2】——clamscan入口函数浏览

    就简单给代码加上些注释,方便理解.第一次浏览,应该会有不正确的理解.后面会继续学习修改. 文件:clamscan\clamscan.c 代码如下: nt main(int argc, char **a ...

  7. C# RDLC报表不出现预览窗体直接输出到打印机

    #region 直接打印区域 /// <summary> /// 直接打印到打印机 /// </summary> /// <param name="report ...

  8. 两个for循环效率，哪个高

    在多重循环中,如果有可能,应当将最长的循环放在最内层,最短的循环放在最外层,以减少CPU跨切循环层的次数.

  9. 记一次MBR锁机病毒分析

    有一天,在机缘巧合之下我获得了一个锁机软件(是多巧合阿喂!),然后兴高采烈的把它拖入了虚拟机里蹂躏(>_<!). 很巧,软件有虚拟机检测... Emmmm好吧,随便过一下... 我用的虚拟 ...

  10. Redis Sentinel初体验

        自Redis增加Sentinel集群工具以来,本博主就从未尝试过使用该工具.最近在调研目前主流的Redis集群部署方案,所以详细地看了一遍官方对于Sentinel的介绍并在自己的台式机上完成了 ...