Vue - 插值表达式数据渲染

Vue - 插值表达式 {{}} 数据渲染

• 后端返回数据嵌套多层的时候，数据结构如下，eg:

lease: {
    school: {
        id: 48,
        name: 'XXXX',
        parent:'MMMMM'
    }
}
复制代码

{{}} 渲染数据：

<ul>
    <li> {{ lease.school.name }} </li>
</ul>
复制代码

此时，lease.school.name 为 undefined，页面加载的时候，数据还没有渲染出来。解决方式，在外层父盒子上，添加一个 v-if 判断。

<ul v-if="lease.school">
    <li> {{ lease.school.name }} </li>
</ul>
复制代码

转载于:https://juejin.im/post/5c19ac37e51d455de377012e