美文网首页
[Vue warn]: Property "child" was

[Vue warn]: Property "child" was

作者: 前端组件分享 | 来源:发表于2023-09-28 08:23 被阅读0次

    <view class="navs">

                    <view class="c-flex-align" :class="{ 'c-flex-center': index > 0,'right c-flex-aligin': index == (navData.length-1), actNav: index === actNav }" v-for="(item, index) in navData" :key="index" @click="navClick(index)">

                        <!-- v-if改v-show -->

    <view v-for="(child, childx) in item" :key="childx" v-if="child.select">{{ child.name }}</view>

                        <image src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png" mode="" class="icon-triangle" v-if="index === actNav"></image>

                        <image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else></image>

                    </view>

                </view>

    [Vue warn]: Property "child" was accessed during render but is not defined on instance.

    at <View>

    at <View>

    at <View>

    at <ChenchuangCCDropDownFilter>

    at <View>

    at <View>

    at <View>

    at <Index>

    at <AsyncComponentWrapper>

    at <PageBody>

    at <Page>

    at <Anonymous>

    at <Layout>

    at <App>

    解决方法将 v-if 改v-show

    v-show 是通过控制display属性来进行DOM的显示与隐藏,主要用于频繁操作;

    v-if 是真正意义上的条件渲染(销毁和创建元素),条件为true时创建DOM,条件为false时销毁DOM,主要用于大量数据渲染到页面(符合条件就将数据渲染),频繁使用会消耗性能。

    性能区别:

    1、v-if有更高的切换开销,v-show有更高的初始渲染开销。 如果需要频繁的切换,使用v-show比较好,如果运行条件很少改变,使用v-if比较好。

    2、v-show比v-if性能更高,因为v-show只能动态的改变样式,不需要增删DOM元素。

    3、需要多种条件场景,比如id=1,=2,=3…时候,因为只有v-if,可以和v-else等连用,这种比较适合用v-if。

    4、v-show不支持语法,即v-show="false"对template元素来说不起作用。但是此时的template元素支持v-if、v-else-if、v-else、v-for这些指令。

    5、v-if切换时候会实时的销毁和重建内部的事件、钩子函数等,v-show只会初始化渲染时候执行,再切换时候不会执行生命后期的过程。

    相关文章

      网友评论

          本文标题:[Vue warn]: Property "child" was

          本文链接:https://www.haomeiwen.com/subject/mvdlbdtx.html