上代码

<!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. 【转】敏捷开发之Scrum扫盲篇

    现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的话来讲述Scrum中 ...

  2. Django博客项目思路整理

    首先明确一点,我目前学习Django是为了做一个博客,那么以博客为目标进行实践的话,按照Django的MTV模型的顺序来思考的话,要考虑如下几个事情: (Models) 1.在博客里的各种数据模型: ...

  3. .net core执行dotnet ef migrations createmodel等命令出错

    .net core执行dotnet ef migrations createmodel等命令出错 执行dotnet ef migrations createmodel.dotnet ef migrat ...

  4. C#Encoding

    1.Encoding (1).如何生成一个Encoding即一种编码 Encoding位于System.Text命名空间下,是一个抽象类,它的派生类如下图: 要实例化一个Encoding一共有以下两种 ...

  5. iOS View 外层奇怪的黑线

    最近碰到一个问题,当时是为了建了一个能自动适应内容的 Label.根据内容,我计算出需要的尺寸,然后把新尺寸设置给 Label. 但是显示的时候,一个奇怪的现象出现了,Label 的顶端总是有一条浅浅 ...

  6. Android 推送

    安卓推送方案及比较 http://www.eoe.cn/news/11955.html ******************************************************** ...

  7. OpenStack环境中的NFV实践

    原文链接:http://www.99cloud.net/html/2016/jiuzhouyuanchuang_1103/250.html 在开始实践之前我们首先需要了解一些NFV概念和术语. NFV ...

  8. javascript简要笔记

      零. 数据   0. 变量 分为字符串,数字,undefined, null,对象 undefined类型是只声明了变量,但是没赋值 可以使用typeof()函数来查看变量类型   例子1 var ...

  9. Dubbo自定义日志拦截器

    前言 上一篇文章 Spring aop+自定义注解统一记录用户行为日志 记录了 web层中通过自定义注解配合Spring aop自动记录用户行为日志的过程.那么按照分布式架构中Dubbo服务层的调用过 ...

  10. 给对象和函数添加method方法

    蝴蝶书中有一个method方法,用来给函数定义方法.看了之后,想着能不能给对象也定义方法呢?. 下面的代码可以实现给函数定义方法: //Function method Function.prototy ...