Vue.js 中如何整合 `<ul>` 元素中的 `<li>` 元素

你可以将<ul>中的 <li> 元素整合为一个单行的代码，如下所示：

<ul class='nav' v-bind:class='current'>
  <li v-for='item in menuItems' :key='item.name' :class='item.name' @click='onChange(item.name)'>{{ item.name }}</li>
</ul>
<div>当前选择按钮：{{current}}</div>

在这个示例中，我们使用了 v-for 指令来遍历 menuItems 数组，将每个数组项渲染为一个 <li> 元素。通过设置 :key 绑定一个唯一的键值，可以提高性能。:class 绑定了每个 <li> 的类名，这里我们可以直接使用 item.name 作为类名。@click 绑定了 onChange 方法，并传递了 item.name 参数。最后，我们在 <li> 中显示了 item.name 的内容。

同时，在上述代码中，我们也使用了一个 menuItems 数组，其中包含了要渲染的菜单项。你可以在 Vue 实例的 data 中定义 menuItems 数组，并将它与 current 变量进行绑定，以实现动态样式的切换。

注意：为了让代码更简洁，你可以在 Vue 实例的 data 中定义 menuItems 数组，然后在 methods 中定义 onChange 方法，以便在 Vue 组件中使用。