上代码

<!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#学习问题

    第二次作业我没注意看群通告,看到都3月8号,开始着手想用c#试着写写,才发现一些问题. a.鞠老的要求中必须原数据需要csv文件,csv文件不是太了解,网上简单查阅了一下------csv意思是逗号分 ...

  2. Sqler-Cmd

    针对于sqler 工具cmd 部分 做了如下整理 1 Cluster Model 2 Regedit Model $servers= '192.168.25.xx','192.168.25.yy' W ...

  3. OpenglEs开篇

    1.,但博客有接近一年没有写了.虽然有学到东西,但没有记录感觉是是空空的,最近在学习Opengles, 现在开始重操旧业(写博客了).

  4. 使用Intellij Idea连接Team Foundation Server (TFS)实现代码版本管理

    Intellij Idea是一个Java项目开发工具,支持Windows,MAC OS和Linux的跨平台开发环境,具备良好和智能的用户界面,在欧洲市场拥有很多粉丝.https://www.jetbr ...

  5. MySQL大数据量的导入

    最近在公司备份数据库数据,简单的看了一下.当然我用的是简单的手动备份. 第一:其实最好的方法是直接用: mysqldump -u用户名 -p密码 数据库名 < 数据库名.sql 在linux在操 ...

  6. 【OCP题库】最新CUUG OCP 12c 071考试题库（65题）

    65.(22-16) choose the best answer: The CUSTOMERS table has the following structure: You need to writ ...

  7. 【OCP-12c】CUUG 071题库考试原题及答案解析（14）

    14.(6-13) choose the best answer:View the Exhibit and examine the structure of the ORDERS table.Whic ...

  8. 微信小程序如何转换成分与秒

  9. [JS] js 判断用户是否在浏览当前页面

    var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : ...

  10. jquery源码解析：val方法和valHooks对象详解

    这一课,我们将讲解val方法,以及对value属性的兼容性处理,jQuery中通过valHooks对象来处理. 首先,我们先来看下val方法的使用: $("#input1").va ...