Vue3案例——通过指令实现下拉菜单效果

使用v-for指令可以对数组、对象进行循环，来获取其中的每一个值。

1. v-for指令遍历数组

使用v-for指令时，必须使用特定语法alias in expression，其中items是源数据数组，而item则是被迭代的数组元素的别名，具体格式如下：

<div v-for="item in items">

    {{item}}

</div>

下面看一个示例，使用v-for指令循环渲染一个数组。

【例2.12】 v-for指令遍历数组（源代码\ch02\2.12.html）。

<div id="app">

    <ul>

        <li v-for="item in nameList">

          {{item.name}}--{{item.city}}--{{item.price}}元

        </li>

    </ul>

</div>

<!--引入Vue文件-->

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>

    const vm= Vue.createApp({//创建一个应用程序实例

        data(){//该函数返回数据对象

          return{

                  nameList:[

                      {name:'洗衣机',city:'上海',price:'8600'},

                      {name:'冰箱',city:'北京',price:'6800'},

                      {name:'空调',city:'广州',price:'5900'}

                  ]

            }

         }

    }).mount('#app'); //在指定的DOM元素上装载应用程序实例的根组件

</script>

在Chrome浏览器中运行程序，按F12键打开控制台并切换到Elements选项卡，结果如图2-13所示。

2. 通过指令实现下拉菜单

网站主页中经常需要设计下拉菜单，当鼠标移动到某个菜单上时会弹出下拉子菜单列表，每个子菜单项可以链接到不同的页面，当鼠标离开菜单列表时，子菜单项会被隐藏掉。下面就通过指令来设计这样的下拉菜单效果。

【例2.22】设计下拉菜单（源代码\ch02\2.22.html）。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>下拉菜单</title>

<style>

    body {

        width: 600px;

    }

    a {

        text-decoration: none;

        display: block;

        color: #fff;

        width: 120px;

        height: 40px;

        line-height: 40px;

        border: 1px solid #fff;

        border-width: 1px 1px 0 0;

        background: #5D478B;

    }

    li {

        list-style-type: none;

    }

    #app > li {

        list-style-type: none;

        float: left;

        text-align: center;

        position: relative;

    }

    #app li a:hover {

        color: #fff;

        background: #FF8C69;

    }

    #app li ul {

        position: absolute;

        left: -40px;

        top: 40px;

        margin-top: 1px;

        font-size: 12px;

    }

     [v-cloak] {

        display: none;

    }

</style>

</head>

<body>

    <div id = "app" v-cloak>

        <li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">

            <a :href="menu.url" >

                {{menu.name}}

            </a>

            <ul v-show="menu.show">

                <li v-for="subMenu in menu.subMenus">

                    <a :href="subMenu.url">{{subMenu.name}}</a>

                </li>

            </ul>

        </li>

    </div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>

    const data = {

      menus: [

      {

      name: '在线课程', url: '#', show: false, subMenus: [

            {name: 'Python课程', url: '#'},

            {name: 'Java课程', url: '#'},

            {name: '前端课程', url: '#'}

        ]

        },

        {

        name: '经典图书', url: '#', show: false, subMenus: [

            {name: 'Python图书', url: '#'},

            {name: 'Java图书', url: '#'},

            {name: '前端图书', url: '#'}

        ]

        },

        {

        name: '技术支持', url: '#', show: false, subMenus: [

             {name: 'Python技术支持', url: '#'},

             {name: 'Java技术支持', url: '#'},

             {name: '前端技术支持', url: '#'}

        ]

        },

        {

         name: '关于我们', url: '#', show: false, subMenus: [

            {name: '团队介绍', url: '#'},

            {name: '联系我们', url: '#'}

        ]

        }

    ]

    };

    const vm = Vue.createApp({

           data() {

              return data;

          }

    }).mount('#app');

</script>

</body>

</html>

在Chrome浏览器中运行程序，当鼠标放置在“经典图书”菜单项目时，结果如图2-30 所示。