上代码

<!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. Android-自定义圆环

    效果图: 布局的代码,指定引用自定义View类: <!-- 绘制圆环 --> <LinearLayout xmlns:android="http://schemas.and ...

  2. Python学习-13.Python的输入输出（二）

    在Python中,读取文件使用open函数 file=open(r'E:\temp\test.txt','r') var = file.read() print(var) file.close() 第 ...

  3. Android源码设计模式分析开源项目

    简述 该项目通过分析Android系统中的设计模式来提升大家对设计模式的理解,从源码的角度来剖析既增加了对Android系统本身的了解,也从优秀 的设计中领悟模式的实际运用以及它适用的场景,避免在实际 ...

  4. 基于python 3.5 所做的找出来一个字符串中最长不重复子串算法

    功能:找出来一个字符串中最长不重复子串 def find_longest_no_repeat_substr(one_str): #定义一个列表用于存储非重复字符子串 res_list=[] #获得字符 ...

  5. 使用Base64进行string的加密和解密

    //字符串转bytes var ebytes = System.Text.Encoding.Default.GetBytes(keyWord); //bytes进行base64加密 var strBa ...

  6. WP8.1StoreApp(WP8.1RT)---发送邮件和短信

    在WP7/8中,发送短信是利用了EmailComposeTask和SmsComposeTask来实现的. 在WP8.1 Store App中,原来的方式已经失效,采用了新的方法:ChatMessage ...

  7. fatal: Not a git repository (or any parent up to mount point /home)

    问题:fatal: Not a git repository (or any parent up to mount point /home) 解决:git init

  8. jQuery操作标签--样式、文本、属性操作, 文档处理

    1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...

  9. Android 的一些中文文档

    https://blog.csdn.net/qq_36467463/article/details/77990089    //安卓mediaformat api详解 https://www.cnbl ...

  10. Visual Studio code安装步骤

    1.官方下载:https://code.visualstudio.com/,本人电脑是window系统  下载之后,双击安装,安装完之后左侧栏那边是英文,如何变为中文: 按快捷键ctrl+shift+ ...