上代码

<!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. DataTables使用总结

    一.使用方法     1.引入JS文件 <script src="js/plugin/datatables/jquery.dataTables.min.js">< ...

  2. KVM虚拟机windows系统增加硬盘

    原文:http://www.ilanni.com/?p=6211 前一篇文章介绍了有关linux系统添加硬盘的方法,这次我们来介绍有关windows系统添加的相关步骤. 其实linux和windows ...

  3. jenkins-cli命令使用总结

    jenkins-cli命令使用总结 1.在jenkins中查看Jenkins CLI的相关说明 jenkins-->系统管理-->Jenkins CLI:如下图 下载:jenkins-cl ...

  4. iOS 界面布局

    1. auto layout http://www.devtalking.com/articles/adaptive-layout-for-iphone6-1/ http://blog.sina.co ...

  5. 虚拟机搭建ftp环境

    引用http://www.cnblogs.com/xiangxiaodong/archive/2013/12/23/3487028.html,学习. 本人是在windows8系统下,Oracle VM ...

  6. robot framework学习笔记之七—连接mysql数据库

    1.安装Database-Library 输入命令:pip install robotframework_databaselibrary 2.添加Database的Library     3.实例 * ...

  7. 看个AV也中招之cve-2010-2553漏洞分析

    试想:某一天,你的基友给你了一个视频文件,号称是陈老师拍的苍老师的老师题材的最新电影.avi,你满心欢喜,在确定文件格式确实为avi格式后,愉快的脱下裤子准备欣赏,打开后却发现什么也没有,而随后你的基 ...

  8. nginx配置文件中，location字段里面的root字段和别名alias

    1. location里面的root例子 server{ listen ; server_name www.wzw.com; location /www { root /data/; //设置虚拟主机 ...

  9. springMVC请求注解@RequestMapping各个属性值

    最近遇到了一个采用fastJson传输数据的方式,搞了半天,总是感觉模糊,觉得自己有必要在这里做一个系统的总结,今天先从@RequestMapping的属性开始,采用REST 风格的 URL 请求,R ...

  10. 结合业务，精炼SQL

    现代网站,性能的瓶颈都围绕着数据库的性能来谈.数据库是存储的核心部件,在日益增长的流量中会凸显数据库的性能瓶颈.从<淘宝技术十年>书中来看,淘宝发展历程中从MYSQL换成了ORACLE又换 ...