这篇文章主要为大家详细介绍了Vue实现多标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现多标签选择器展示的具体代码，供大家参考，具体内容如下
实现效果
实现代码
<title>Document</title><!-- 引入本地组件库 --><!-- 引入CDN样式 --><!-- --><!-- --><!-- --> .not-active { display: inline-block; font-size: 12px; margin: 5px 8px; } span { margin: 0 2px; } <div id="app"> <!-- 待选标签 --><div> <!-- 分类 --><span class="not-active">{{category.name}}：</span> <span class="not-active"> 不限</span>不限<!-- 标签 --> {{ child.name }} <span class="not-active">{{ child.name }}</span></div><!-- 已选标签 --><div> <span class="not-active">清空已选：<span> {{condition.name}} </div></div>
标签筛选的数据格式
data.js
var categories = [{ name: '品牌', count: 0, children: [{ name: '联想', }, { name: '小米', }, { name: '苹果', }, { name: '东芝', }] }, { name: 'CPU', count: 0, children: [{ name: 'intel i7 8700K', }, { name: 'intel i7 7700K', }, { name: 'intel i9 9270K', }, { name: 'intel i7 8700', }, { name: 'AMD 1600X', }] }, { name: '内存', count: 0, children: [{ name: '七彩虹8G', }, { name: '七彩虹16G', }, { name: '金士顿8G', }, { name: '金士顿16G', }] }, { name: '显卡', count: 0, children: [{ name: 'NVIDIA 1060 8G', }, { name: <em style="color:transparent">本文来源[email protected]搞@^&代*@码)网9</em>'NVIDIA 1080Ti 16G', }, { name: 'NVIDIA 1080 8G', }, { name: 'NVIDIA 1060Ti 16G', }] }]
以上就是Vue实现多标签选择器的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue实现多标签选择器
转载请注明原文链接：Vue实现多标签选择器
