<ul> <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> <router-link :to="item.path" class="tags-li-title"> {{item.title}} </router-link> <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> </li> </ul>

这段代码是一个基于Vue.js的列表渲染。其中`v-for`指令用于循环渲染`tagsList`数组中的每一个元素，`:key`指令用于为每个循环生成的元素设置一个唯一的键值，`:class`指令用于根据条件动态设置元素的class属性。

在每次循环中，`item`表示当前循环到的元素，`index`表示当前元素在`tagsList`数组中的索引值。`isActive(item.path)`是一个方法，用于判断当前元素的路径是否与当前路由路径匹配，从而动态设置元素的class属性。

`<router-link>`标签是Vue.js中用于设置路由导航的组件，通过`to`属性设置路由路径。`<span>`标签中的`@click`事件监听器用于在点击关闭图标时调用`closeTags(index)`方法，从而删除对应的标签。

相关问题

<ul class="aside"> <li class="submenu"> <div class="submenu-title" style="color: #2468f2;"> <i class="iconfont icon-components-full"></i> <span>数据中心</span> <i class="iconfont icon-qian"></i> </div> <ul> <li class="menu-item">数据集</li> <li class="menu-item">在线标注</li> <li class="menu-item">标签组管理</li> </ul> </li> <li class="submenu"> <div class="submenu-title"> <i class="iconfont icon-shujumoxing"></i> <span>模型中心</span> <i class="iconfont icon-qian"></i> </div> <ul> <li class="menu-item">我的模型</li> <li class="menu-item">数据集验证</li> </ul> </li> </ul>jquery写出点击左边的menu-item，右边呈现对应的div

你可以使用 jQuery 来实现这个效果。首先，在 HTML 中为每个 menu-item 和对应的 div 定义一个标识符，例如：

<ul>
  <li class="submenu">
    <div class="submenu-title">
      <i class="iconfont icon-components-full"></i>
      <span>数据中心</span>
      <i class="iconfont icon-qian"></i>
    </div>
    <ul>
      <li class="menu-item" data-target="#dataset">数据集</li>
      <li class="menu-item" data-target="#labeling">在线标注</li>
      <li class="menu-item" data-target="#tag-group">标签组管理</li>
    </ul>
  </li>
  <li class="submenu">
    <div class="submenu-title">
      <i class="iconfont icon-shujumoxing"></i>
      <span>模型中心</span>
      <i class="iconfont icon-qian"></i>
    </div>
    <ul>
      <li class="menu-item" data-target="#my-models">我的模型</li>
      <li class="menu-item" data-target="#data-validation">数据集验证</li>
    </ul>
  </li>
</ul>

<div id="dataset">数据集内容</div>
<div id="labeling">在线标注内容</div>
<div id="tag-group">标签组管理内容</div>
<div id="my-models">我的模型内容</div>
<div id="data-validation">数据集验证内容</div>

然后，在 jQuery 中使用事件委托来监听每个 menu-item 的点击事件，当点击时根据它的 data-target 属性来显示对应的 div。例如：

$(function() {
  $('.menu-item').on('click', function() {
    var target = $(this).data('target');
    $(target).show().siblings('div').hide();
  });
});

这样，当用户点击某个菜单项时，就会根据它的 data-target 属性来显示对应的 div，同时隐藏其他的 div。

<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">标题1</li> <li lay-id="2">标题2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容-1</div> <div class="layui-tab-item">内容-2</div> </div> </div> </div> <div class="layui-tab-item">主体-2</div> </div> </div>优化一下代码

你可以将重复的代码抽取出来作为一个公共的HTML模板，然后在需要使用的地方引用即可，可以使代码更加简洁。

例如，你可以将创意包的tab页抽出作为公共的模板：

<!-- 创意包模板 -->
<script type="text/html" id="tpl-creative">
  <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="{{d.id}}">
    <ul class="layui-tab-title" style="width: 85%">
      {{# layui.each(d.items, function(index, item){ }}
      <li {{ index === 0 ? 'class="layui-this"' : '' }} lay-id="{{ item.id }}">{{ item.title }}</li>
      {{# }); }}
    </ul>
    <div class="layui-tab-content">
      {{# layui.each(d.items, function(index, item){ }}
      <div class="layui-tab-item {{ index === 0 ? 'layui-show' : '' }}">{{ item.content }}</div>
      {{# }); }}
    </div>
  </div>
</script>

<!-- 页面内容 -->
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content">
  <div class="layui-btn addContent" lay-active="addContent">添加创意包</div>
  <ul class="layui-tab-title" style="width: 85%">
    <li class="layui-this" lay-id="1">创意包1</li>
    <li lay-id="2">创意包2</li>
  </ul>
  <div class="layui-tab-content">
    <!-- 引用创意包模板 -->
    {{# layui.laytpl($('#tpl-creative').html()).render({ id: 'creative1', items: [{ id: '1', title: '标题1', content: '内容-1' }, { id: '2', title: '标题2', content: '内容-2' }] }) }}
  </div>
</div>

在上面的代码中，我们将创意包的tab页抽取出来作为了一个公共的模板，可以通过laytpl模块来渲染模板并将结果插入到页面中。这样就可以避免重复的代码，使代码更加简洁。