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

上代码

DOCTYPE html>

iview exampletitle> <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> <p>div></p> <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://youtu.be/D3SVyMgY5q4 "翻墙可看") </div> <hr/> <div class="reprint" id="reprint-statement"> <div class="reprint__author"> <span class="reprint-meta" style="font-weight: bold;"> <i class="fas fa-user"> 文章作者: </i> </span> <span class="reprint-info"> <a href="http://jixioakang.com" rel="external nofollow noreferrer">xkloveme</a> </span> </div> <div class="reprint__type"> <span class="reprint-meta" style="font-weight: bold;"> <i class="fas fa-link"> 文章链接: </i> </span> <span class="reprint-info"> <a href="http://jixioakang.com/2017/09/11/2017-09-11-iview-zhong-shi-yong-tag-shi-jin-xing-shu-ju-de-bian-hua/">http://jixioakang.com/2017/09/11/2017-09-11-iview-zhong-shi-yong-tag-shi-jin-xing-shu-ju-de-bian-hua/</a> </span> </div> <div class="reprint__notice"> <span class="reprint-meta" style="font-weight: bold;"> <i class="fas fa-copyright"> 版权声明: </i> </span> <span class="reprint-info"> 本博客所有文章除特別声明外,均采用 <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a> 许可协议。转载请注明来源 <a href="http://jixioakang.com" target="_blank">xkloveme</a> ! </span> </div> </div> <script async defer> document.addEventListener("copy", function (e) { let toastHTML = '<span>复制成功,请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>'; M.toast({html: toastHTML}) }); function navToReprintStatement() { $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800); } </script> <div class="tag_share" style="display: block;"> <div class="post-meta__tag-list" style="display: inline-block;"> <div class="article-tag"> <a href="/tags/%E6%8A%80%E6%9C%AF/"> <span class="chip bg-color">技术</span> </a> <a href="/tags/vue/"> <span class="chip bg-color">vue</span> </a> </div> </div> <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;"> <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css"> <div id="article-share"> <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享!</p>"></div> <script src="/libs/share/js/social-share.min.js"></script> </div> </div> </div> <style> #reward { margin: 40px 0; text-align: center; } #reward .reward-link { font-size: 1.4rem; line-height: 38px; } #reward .btn-floating:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2); } #rewardModal { width: 320px; } #rewardModal .reward-title { margin: 15px auto; padding-bottom: 5px; } #rewardModal .modal-content { padding: 10px; } #rewardModal .close { position: absolute; right: 15px; top: 15px; color: rgba(0, 0, 0, 0.5); font-size: 1.3rem; line-height: 20px; cursor: pointer; } #rewardModal .close:hover { color: #ef5350; transform: scale(1.3); -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); } #rewardModal .reward-tabs { margin: 0 auto; width: 210px; } .reward-tabs .tabs { height: 38px; margin: 10px auto; padding-left: 0; } .reward-content ul { padding-left: 0 !important; } .reward-tabs .tabs .tab { height: 38px; line-height: 38px; } .reward-tabs .tab a { color: #fff; background-color: #ccc; } .reward-tabs .tab a:hover { background-color: #ccc; color: #fff; } .reward-tabs .wechat-tab .active { color: #fff !important; background-color: #22ab38 !important; } .reward-tabs .alipay-tab .active { color: #fff !important; background-color: #019fe8 !important; } .reward-tabs .reward-img { width: 210px; } </style> <div id="reward"> <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red" >赏</a > <!-- Modal Structure --> <div id="rewardModal" class="modal"> <div class="modal-content"> <a class="close modal-close"><i class="fas fa-times"></i></a> <h4 class="reward-title">你的赏识是我前进的动力</h4> <div class="reward-content"> <div class="reward-tabs"> <ul class="tabs row"> <li class="tab col s6 alipay-tab waves-effect waves-light"> <a href="#alipay">支付宝</a> </li> <li class="tab col s6 wechat-tab waves-effect waves-light"> <a href="#wechat">微 信</a> </li> </ul> <div id="alipay"> <img src="/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码" /> </div> <div id="wechat"> <img src="/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码" /> </div> </div> </div> </div> </div> </div> <script> $(function() { $(".tabs").tabs(); }); </script> </div> </div> <link rel="stylesheet" href="https://cdn.bootcss.com/gitalk/1.6.2/gitalk.min.css"> <link rel="stylesheet" href="/css/my-gitalk.css"> <div class="card gitalk-card" data-aos="fade-up"> <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; left: 20px; top: 15px; padding-bottom: 5px;"> <i class="fas fa-comments fa-fw" aria-hidden="true"></i> <span>评论</span> </div> <div id="gitalk-container" class="card-content"></div> </div> <script src="https://cdn.bootcss.com/gitalk/1.6.2/gitalk.min.js"></script> <script> let gitalk = new Gitalk({ clientID: 'f1e60c7afa53a51926b5', clientSecret: '2430231be04e68f6ba8ccf331c537cc19f50a0bd', repo: 'xkloveme.github.io', owner: 'xkloveme', admin: "xkloveme", id: '2017-09-11T15-26-00', distractionFreeMode: false // Facebook-like distraction free mode }); gitalk.render('gitalk-container'); </script> <article id="prenext-posts" class="prev-next articles"> <div class="row article-row"> <div class="article col s12 m6" data-aos="fade-up"> <div class="article-badge left-badge text-color"> <i class="fas fa-chevron-left"></i> 上一篇</div> <div class="card"> <a href="/2017/09/15/2017-09-15-vue-zhong-guo-lu-qi-bi-jiao-liang-ge-shu-zu-qu-xiang-tong-zhi/"> <div class="card-image"> <img src="https://picsum.photos/600/300" class="responsive-img" alt="vue中过滤器比较两个数组取相同值"> <span class="card-title">vue中过滤器比较两个数组取相同值</span> </div> </a> <div class="card-content article-content"> <div class="summary block-with-text"> 在 vue 中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同 ID 的不同 name 值 有两种写法,两个 for 循环和 map 写法 const toName = (ids, arr) => {le </div> <div class="publish-info"> <span class="publish-date"> <i class="far fa-clock fa-fw icon-date"></i>2017-09-15 </span> <span class="publish-author"> <i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/%E5%89%8D%E7%AB%AF/" class="post-category"> 前端 </a> </span> </div> </div> <div class="card-action article-tags"> <a href="/tags/%E6%8A%80%E6%9C%AF/"> <span class="chip bg-color">技术</span> </a> <a href="/tags/vue/"> <span class="chip bg-color">vue</span> </a> </div> </div> </div> <div class="article col s12 m6" data-aos="fade-up"> <div class="article-badge right-badge text-color"> 下一篇 <i class="fas fa-chevron-right"></i> </div> <div class="card"> <a href="/2017/09/09/2017-09-09-bian-ji-qi-zhi-zhan-vim-de-fu-chou/"> <div class="card-image"> <img src="https://picsum.photos/600/300" class="responsive-img" alt="编辑器之战:Vim 的复仇"> <span class="card-title">编辑器之战:Vim 的复仇</span> </div> </a> <div class="card-content article-content"> <div class="summary block-with-text"> 文本编辑编程Vim 的神秘之处在于它普通模式时使用一种介于自然语言和编程语言中间的语言。 它包含动词(方法)、形容词(修饰语)、和名词(对象)。输入c命令代表“编辑”某些文本。但是仅仅输入一个 c 不起作用,因为它还需要一个对象。但如果你输 </div> <div class="publish-info"> <span class="publish-date"> <i class="far fa-clock fa-fw icon-date"></i>2017-09-09 </span> <span class="publish-author"> <i class="fas fa-bookmark fa-fw icon-category"></i> <a href="/categories/%E5%B7%A5%E5%85%B7/" class="post-category"> 工具 </a> </span> </div> </div> <div class="card-action article-tags"> <a href="/tags/%E5%B7%A5%E5%85%B7/"> <span class="chip bg-color">工具</span> </a> </div> </div> </div> </div> </article> </div> <script> $('#articleContent').on('copy', function (e) { // IE8 or earlier browser is 'undefined' if (typeof window.getSelection === 'undefined') return; var selection = window.getSelection(); // if the selection is short let's not annoy our users. if (('' + selection).length < Number.parseInt('120')) { return; } // create a div outside of the visible area and fill it with the selected text. var bodyElement = document.getElementsByTagName('body')[0]; var newdiv = document.createElement('div'); newdiv.style.position = 'absolute'; newdiv.style.left = '-99999px'; bodyElement.appendChild(newdiv); newdiv.appendChild(selection.getRangeAt(0).cloneContents()); // we need a <pre> tag workaround. // otherwise the text inside "pre" loses all the line breaks! if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') { newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>"; } var url = document.location.href; newdiv.innerHTML += '<br />' + '来源: 小康之家<br />' + '文章作者: xkloveme<br />' + '文章链接: <a href="' + url + '">' + url + '</a><br />' + '本文章著作权归作者所有,任何形式的转载都请注明出处。'; selection.selectAllChildren(newdiv); window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200); }); </script> <!-- 代码块功能依赖 --> <script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script> <!-- 代码语言 --> <script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script> <!-- 代码块复制 --> <script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script> <!-- 代码块收缩 --> <script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script> <!-- 代码块折行 --> <style type="text/css"> code[class*="language-"], pre[class*="language-"] { white-space: pre !important; } </style> </div> <div id="toc-aside" class="expanded col l3 hide-on-med-and-down"> <div class="toc-widget"> <div class="toc-title"><i class="far fa-list-alt"></i>  目录</div> <div id="toc-content"></div> </div> </div> </div> <!-- TOC 悬浮按钮. --> <div id="floating-toc-btn" class="hide-on-med-and-down"> <a class="btn-floating btn-large bg-color"> <i class="fas fa-list-ul"></i> </a> </div> <script src="https://cdn.bootcss.com/tocbot/4.10.0/tocbot.min.js"></script> <script> $(function () { tocbot.init({ tocSelector: '#toc-content', contentSelector: '#articleContent', headingsOffset: -($(window).height() * 0.4 - 45), // headingsOffset: -205, headingSelector: 'h2, h3, h4' }); // modify the toc link href to support Chinese. let i = 0; let tocHeading = 'toc-heading-'; $('#toc-content a').each(function () { $(this).attr('href', '#' + tocHeading + (++i)); }); // modify the heading title id to support Chinese. i = 0; $('#articleContent').children('h2, h3, h4').each(function () { $(this).attr('id', tocHeading + (++i)); }); // Set scroll toc fixed. let tocHeight = parseInt($(window).height() * 0.4 - 64); let $tocWidget = $('.toc-widget'); $(window).scroll(function () { let scroll = $(window).scrollTop(); /* add post toc fixed. */ if (scroll > tocHeight) { $tocWidget.addClass('toc-fixed'); } else { $tocWidget.removeClass('toc-fixed'); } }); /* 修复文章卡片 div 的宽度. */ let fixPostCardWidth = function (srcId, targetId) { let srcDiv = $('#' + srcId); if (srcDiv.length === 0) { return; } let w = srcDiv.width(); if (w >= 450) { w = w + 21; } else if (w >= 350 && w < 450) { w = w + 18; } else if (w >= 300 && w < 350) { w = w + 16; } else { w = w + 14; } $('#' + targetId).width(w); }; // 切换TOC目录展开收缩的相关操作. const expandedClass = 'expanded'; let $tocAside = $('#toc-aside'); let $mainContent = $('#main-content'); $('#floating-toc-btn .btn-floating').click(function () { if ($tocAside.hasClass(expandedClass)) { $tocAside.removeClass(expandedClass).hide(); $mainContent.removeClass('l9'); } else { $tocAside.addClass(expandedClass).show(); $mainContent.addClass('l9'); } fixPostCardWidth('artDetail', 'prenext-posts'); }); }); </script> </main> <footer class="page-footer bg-color"> <div class="container row center-align"> <div class="col s12 m8 l8 copy-right"> Copyright © <span id="year">年份</span> <a href="http://jixioakang.com" target="_blank">xkloveme</a> | Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> <br />  <i class="fas fa-chart-area" ></i > 站点总字数: <span class="white-color" >141.7k</span > 字 <span id="busuanzi_container_site_pv"> | <i class="far fa-eye"></i> 总访问量: <span id="busuanzi_value_site_pv" class="white-color" ></span > 次 </span> <span id="busuanzi_container_site_uv"> | <i class="fas fa-users"></i> 总访问人数: <span id="busuanzi_value_site_uv" class="white-color" ></span > 人 </span> <br /> <span id="sitetime">载入运行时间...</span> <script> function siteTime() { window.setTimeout("siteTime()", 1000); var seconds = 1000; var minutes = seconds * 60; var hours = minutes * 60; var days = hours * 24; var years = days * 365; var today = new Date(); var startYear = "2017"; var startMonth = "3"; var startDate = "13"; var startHour = "0"; var startMinute = "0"; var startSecond = "0"; var todayYear = today.getFullYear(); var todayMonth = today.getMonth() + 1; var todayDate = today.getDate(); var todayHour = today.getHours(); var todayMinute = today.getMinutes(); var todaySecond = today.getSeconds(); var t1 = Date.UTC( startYear, startMonth, startDate, startHour, startMinute, startSecond ); var t2 = Date.UTC( todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond ); var diff = t2 - t1; var diffYears = Math.floor(diff / years); var diffDays = Math.floor(diff / days - diffYears * 365); var diffHours = Math.floor( (diff - (diffYears * 365 + diffDays) * days) / hours ); var diffMinutes = Math.floor( (diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes ); var diffSeconds = Math.floor( (diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds ); if (startYear == todayYear) { document.getElementById("year").innerHTML = todayYear; document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"; } else { document.getElementById("year").innerHTML = startYear + " - " + todayYear; document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"; } } setInterval(siteTime, 1000); </script> <br /> </div> <div class="col s12 m4 l4 social-link social-statis"> <a href="https://github.com/xkloveme" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"> <i class="fab fa-github"></i> </a> <a href="mailto:xkloveme@gmail.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50"> <i class="fas fa-envelope-open"></i> </a> <a href="https://twitter.com/xkloveme" class="tooltipped" target="_blank" data-tooltip="关注我的Twitter: https://twitter.com/xkloveme" data-position="top" data-delay="50"> <i class="fab fa-twitter"></i> </a> <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50"> <i class="fas fa-rss"></i> </a> </div> </div> </footer> <div class="progress-bar"></div> <!-- 搜索遮罩框 --> <div id="searchModal" class="modal"> <div class="modal-content"> <div class="search-header"> <span class="title"><i class="fas fa-search"></i>  搜索</span> <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字" class="search-input"> </div> <div id="searchResult"></div> </div> </div> <script src="/js/search.js"></script> <script type="text/javascript"> $(function () { searchFunc("/" + "search.xml", 'searchInput', 'searchResult'); }); </script> <!-- 回到顶部按钮 --> <div id="backTop" class="top-scroll"> <a class="btn-floating btn-large waves-effect waves-light" href="#!"> <i class="fas fa-arrow-up"></i> </a> </div> <script src="https://cdn.bootcss.com/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdn.bootcss.com/masonry/4.0.0/masonry.pkgd.min.js"></script> <script src="https://cdn.bootcss.com/aos/3.0.0-beta.6/aos.js"></script> <script src="https://cdn.bootcss.com/scrollprogress/3.0.2/scrollProgress.min.js"></script> <script src="https://cdn.bootcss.com/lightgallery/1.6.11/js/lightgallery-all.min.js"></script> <script src="/js/matery.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-102352377-2"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-102352377-2'); </script> <!-- Baidu Analytics --> <!-- Baidu Push --> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script src="/libs/others/clicklove.js" async="async"></script> <script async src="/libs/others/busuanzi.pure.mini.js"></script> <script type="text/javascript" src="/libs/background/ribbon-dynamic.js" async="async"></script> <script src="/libs/instantpage/instantpage.js" type="module"></script> </body> </html>