条件渲染的疑问
来源：2-5 条件渲染、列表渲染、Class与Style绑定
慕尼黑1036875
2019-03-15 09:21
老师，<v-if>和<v-else>的执行顺序是先判断<v-if>里面的条件，如果满足就输出div中的name，如果不满足就输出else，那在本视频课程中大概15分钟的时间这个例子，不是应该先是输出名字小张，在输出else中的age内容29吗？为什么是显示先29再小张？？？
写回答
关注
1回答
-
- 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属性）
3小时速成 Vue2.x 核心技术
带你快速学习最流行的前端框架vue2.x的核心技术
82559 学习 · 487 问题
相似问题