上代码
<!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