vue的for循环在vscode里面有波浪线?

Question

<ol class="chart-nav-tabs" style="right: 11px">
                <li class="nav-tabs"
                    :class="[defaultKey === nav.key ? 'isSelected': '']"
                    @click="selectNavTab(nav.key)"
                    v-for="nav in navTabs.children">
                    {{nav.title}}
                </li>
            </ol>

当我删除掉v-for="nav in navTabs.children"就不会有波浪线,这是安装少了插件还是怎么回事呢?

Answer 1

加个：:key=nav.key 就行了，v-for 需要key值来提高虚拟dom的diff算法性能

Answer 2

鼠标放上去就会提示出现的错误，应该是安装的插件vetur 给出的

Answer 3

少了key啦,
`<ol class="chart-nav-tabs" style="right: 11px">

            <li class="nav-tabs"
                :class="[defaultKey === nav.key ? 'isSelected': '']"
                @click="selectNavTab(nav.key)"
                v-for="()nav,index) in navTabs.children">
                :key="index"
                {{nav.title}}
            </li>
        </ol> "`
        

因为diff算法问题,你加了key加快diff算法遍历速度,如果没有的话vue只能遍历元素,简单就是加快算法速度

Answer 4

少了 key