问答详情
源自:2-5 条件渲染、列表渲染、Class与Style绑定

条件渲染的疑问

老师,<v-if>和<v-else>的执行顺序是先判断<v-if>里面的条件,如果满足就输出div中的name,如果不满足就输出else,那在本视频课程中大概15分钟的时间这个例子,不是应该先是输出名字小张,在输出else中的age内容29吗?为什么是显示先29再小张???

提问者:慕尼黑1036875 2019-03-15 09:21

个回答

  • Brian
    2019-03-15 11:00:41

    哈哈,来来来,逻辑问题,别把自己绕进去了。

    你说的对,if条件不满足就会输出else中的,这就是If else条件渲染。

    那我们来看看我们的例子:

    <div v-for="item in list">
      <div v-if="item.age > 29">
        {{item.name}}
      </div>
      <div v-else>
        {{item.age}}
      </div>
    </div>

    先不看外层的for循环,单纯看里面的逻辑:

    如果item的属性age大于29,就输出item的name属性;

    否则(item的属性age小于等于29),就输出item的age属性;


    好,现在我们来看看list这个对象里面有什么:

    list: [{
      name: 'liwei',
      age: 29
    },{
      name: '小张',
      age: 30
    }]

    有两个对象对不对?

    第一个对象:

    {
      name: 'liwei',
      age: 29
    }

    来判断一下,age大于29吗?否,输出:29(age属性)

    第二个对象:

    {
      name: '小张',
      age: 30
    }

    来判断一下,age大于29吗?是,输出:小张(name属性)