发布日期:
2017-09-11
文章字数:
137
阅读时长:
1 分
阅读次数:
上代码
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://www.jixiaokang.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://www.jixiaokang.com/2017/09/11/2017/2017-09-11-iview-zhong-shi-yong-tag-shi-jin-xing-shu-ju-de-bian-hua/">http://www.jixiaokang.com/2017/09/11/2017/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://www.jixiaokang.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://unpkg.com/gitalk/dist/gitalk.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://unpkg.com/gitalk/dist/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/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/2017-09-09-chrome-cha-jian/">
<div class="card-image">
<img src="https://picsum.photos/600/300" class="responsive-img" alt="Awesome Chrome 插件集锦">
<span class="card-title">Awesome Chrome 插件集锦</span>
</div>
</a>
<div class="card-content article-content">
<div class="summary block-with-text">
子曾曰：“工欲善其事，必先利其器。居是邦也。”——语出《论语·卫灵公》；其后一百多年，荀子也在其《劝学》中倡言道：“吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻
</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://www.jixiaokang.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"
>148.1k</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>