iview中使用Tag时进行数据的变化和实现将输入内容转化为标签输出数组

上代码

<!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=" 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

原文地址:https://www.cnblogs.com/xkloveme/p/7507906.html