# 使用

我们还可以通过emui-nav-item填充 nav

首页 测试 按钮

最普通的竖排

<div id="app">
  <emui-nav :selected.sync="selected" style="margin: 20px 0 0 20px;">
    <emui-nav-item name="home">首页</emui-nav-item>
    <emui-nav-item name="hi1re">测试</emui-nav-item>
    <emui-nav-item name="123">按钮</emui-nav-item>
  </emui-nav>
</div>
<script>
  export default {
    name: "App",

    data() {
      return {
        selected: ["culture"],
      };
    },
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy

我们还可以通过vertical支持竖行排列

首页 测试 你好

我们还可以通过vertical支持竖行排列

<div id="app">
  <emui-nav
    :selected.sync="selected"
    vertical
    style="width: 200px; margin: 20px 0 0 20px;"
  >
    <emui-nav-item name="home">首页</emui-nav-item>
    <emui-nav-item name="hire">测试</emui-nav-item>
    <emui-nav-item name="22">你好</emui-nav-item>
  </emui-nav>
</div>

<script>
  export default {
    name: "App",

    data() {
      return {
        selected: ["culture"],
      };
    },
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Expand Copy

# Attributes

# 1、nav

属性 属性值 说明
selectd Array 数组

# 2、sub-nav

属性 属性值 说明
title string 子导航的标题

# 2、nav-item

属性 属性值 说明
name string 标题的 name 以设置激活 item