条件渲染的疑问
老师，<v-if>和<v-else>的执行顺序是先判断<v-if>里面的条件，如果满足就输出div中的name，如果不满足就输出else，那在本视频课程中大概15分钟的时间这个例子，不是应该先是输出名字小张，在输出else中的age内容29吗？为什么是显示先29再小张？？？
慕尼黑1036875
2019-03-15
1 回答
哈哈，来来来，逻辑问题，别把自己绕进去了。
你说的对，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属性）
举报
0/150
提交
取消
