v-for的终极用法（配合路由使用）

最新推荐文章于 2025-04-13 22:18:22 发布

微机原理通识

最新推荐文章于 2025-04-13 22:18:22 发布

阅读量1.2k

点赞数

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/weixin_41556165/article/details/86525918

版权

vuejs 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了Vue中Key属性的重要性和优化作用，尤其是在列表渲染时如何利用Key提升渲染效率，减少页面资源消耗。通过具体代码示例，展示了如何在v-for循环中正确使用Key，避免控制台警告，实现更佳的性能表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:key是为vue的响应式渲染提供方法，在列表中单条数据改变的情况下，可以进行单独渲染，减少页面资源消耗。

当前页面如果有列表渲染v-for，并且在v-for的循环标签中没有:key元素时，控制台会出现警告.

在页面标签中使用

<ul class="letter_classify">
    <li v-for="(value, key, index) in sortgroupcity" :key="key"  class="letter_classify_li">
        <h4 class="city_title">{{key}}
            <span v-if="index == 0">（按字母排序）</span>
        </h4>
        <ul class="groupcity_name_container citylistul clear">
            <router-link  tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id" class="ellipsis">
                {{item.name}}
            </router-link>
        </ul>
    </li>
</ul>

一般来说，使用:key="items.id"的属性有利于代码的优化，减少页面资源消耗

<section id="hot_city_container">
    <h4 class="city_title">热门城市</h4>
    <ul class="citylistul clear">
        <router-link  tag="li" v-for="item in hotcity" :to="'/city/' + item.id" :key="item.id">
            {{item.name}}
        </router-link>
    </ul>
</section>

配合路由router-link :to使用

其中的

 <router-link tag="li"  v-for="item in hotcity" :to="'/city/' + item.id" :key="item.id">
	{{item.name}}
</router-link>

表示的是：产生v-for遍历个li标签（可点击跳转），每个标签对应的url是:to后面的内容。
url在router.js如下实现：

export default [{
    path: '/',
    component: App, //顶层路由，对应index.html
    children: [ //二级路由。对应App.vue
        //地址为空时跳转home页面
        {
            path: '',
            redirect: '/home'
        },
        //首页城市列表页
        {
            path: '/home',
            component: home
        },
        //当前选择城市页
        {
            path: '/city/:cityid',
            component: city
        },