iview中使用Tag時進行數據的變化和實現將輸入內容轉化為標簽輸出數組
阿新 • • 發佈：2017-09-12
target spl method handle eof class har ash href
上代碼
<!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> <Buttonsize="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>
相關演示（FQ可看）：youtube
iview中使用Tag時進行數據的變化和實現將輸入內容轉化為標簽輸出數組